跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法

PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法

设置css属性:setstyle

通过ID设置css属性 x$('#top1').setStyle('color', '#DB0404');

通过Class设置css属性 x$('.top2').setStyle('color', '#123456'); x$('.top2').setStyle('backgroundColor', '#EFEFEF');

获取css属性:getstyle

获取top1 样式Color值

rgb(219, 4, 4)

获取top2 样式Color,BackgroundColor值

rgb(1, 10, 224)rgb(239, 239, 239)

增加class 样式属性:addclass

给first li元素集中的每个元素增加一个class

给second li元素集中的每个元素增加一个class

检查class 样式属性:hasclass

检查样式为firstlicolor，通过返回true

true

检查样式为nofirstlicolor，不通过返回false

false

检查样式为firstlicolor，通过返回元素里面的值

2 1

移除元素中的指定class:removeclass

【Div样式为红色】已经移除样式

如果指定的class存在则移除，不存在则添加【有则改之无则加勉】:toggleClass

x$( selector ).toggleClass( className )

一次设置多个css属性:{.css}

x$('#demoshow').css({ backgroundColor:'blue', color:'white', border:'2px solid red' });

示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>XuijsDemo</title>

<style>

.firstlicolor {

	color:#0000FF

}

.secondlicolor {

	color:#F60

}

.removeclass {

	color:#FF0000

}

.fiveshow{color:#0000FF}

</style>

<script src="content/scripts/xui-2.2.0.min.js"></script>

<script>

function initialise()

{

}

//style  样式处理

function styleshow()

{

        //setStyle

	//设置id top1 样式Color值

	x$('#top1').setStyle('color', '#DB0404');

	//设置class top2 样式Color BackgroundColor值

	x$('.top2').setStyle('color', '#010AE0');

	x$('.top2').setStyle('backgroundColor', '#EFEFEF');

	//getStyle

	//获取top1 样式Color值

	var showtop1colorvalue= x$('#top1').getStyle('color');

	x$('#showtop1color').html('inner', showtop1colorvalue+'');

	//获取class top2 样式Color BackgroundColor值

	var showtop2colorvalue= x$('.top2').getStyle('color');

	x$('.top2').getStyle('backgroundColor', function(prop) {

	x$('#showtop2color').html('inner', showtop2colorvalue+''+prop);

	});

	//给first li元素集中的每个元素增加一个class

	x$('#first li').addClass('firstlicolor');

	//给second li元素集中的每个元素增加一个class

	x$('#second li').addClass('secondlicolor');

	//检查样式为firstlicolor，通过返回true

	var firstlihasClass= x$('#first li').hasClass('firstlicolor');

	x$('#firstlihas1Class').html('inner', firstlihasClass+'');

	//检查样式为nofirstlicolor，不通过返回false

	var firstlihasClass= x$('#first li').hasClass('nofirstlicolor');

	x$('#firstlihas2Class').html('inner', firstlihasClass+'');

	//检查样式为firstlicolor，通过返回元素里面的

	var list="";

	x$('#first li').hasClass('firstlicolor', function(element) {

	//alert(x$(element).html());

	list=x$(element).html()+'<br>'+list;

	});

	x$('#firstlihas3Class').html('inner', list);

	//移除元素中的指定class

	x$('.removeclass').removeClass('removeclass');

	//如果指定的class存在则移除，不存在则添加【有则改之无则加勉】

	x$('#five').addClass('fiveshow');

	x$('#second li').toggleClass('secondlicolor');

	//一次设置多个css属性

	x$('#demoshow').css({ backgroundColor:'blue', color:'white', border:'2px solid red' });

}

</script>

</head>

<body onload="initialise();styleshow();">

<h3>设置css属性:setstyle</h3>

<div id="top1"> 通过ID设置css属性<br/>

  x$('#top1').setStyle('color', '#DB0404'); </div>

<div class="top2"> 通过Class设置css属性<br/>

  x$('.top2').setStyle('color', '#123456');<br/>

  x$('.top2').setStyle('backgroundColor', '#EFEFEF'); </div>

<h3>获取css属性:getstyle</h3>

获取top1 样式Color值

<div id="showtop1color"></div>

获取top2 样式Color,BackgroundColor值

<div id="showtop2color"></div>

<br/>

<h3>增加class 样式属性:addclass</h3>

给first li元素集中的每个元素增加一个class

<ul id="first">

  <li id="one">1</li>

  <li id="two">2</li>

</ul>

给second li元素集中的每个元素增加一个class

<ul id="second">

  <li id="three">3</li>

  <li id="four">4</li>

  <li id="five">5</li>

</ul>

<h3>检查class 样式属性:hasclass</h3>

检查样式为firstlicolor，通过返回true

<div id="firstlihas1Class"></div>

检查样式为nofirstlicolor，不通过返回false

<div id="firstlihas2Class"></div>

检查样式为firstlicolor，通过返回元素里面的值

<div id="firstlihas3Class"></div>

<h3>移除元素中的指定class:removeclass</h3>

<div class="removeclass"> 【Div样式为红色】已经移除样式</div>

<h3>如果指定的class存在则移除，不存在则添加【有则改之无则加勉】:toggleClass</h3>

<div class="toggleClass"> x$( selector ).toggleClass( className )</div>

<h3>一次设置多个css属性:{.css}</h3>

<div id="demoshow"> x$('#demoshow').css({ backgroundColor:'blue', color:'white', border:'2px solid red' });</div>

</body>

</html>

声明：本博客高度重视知识产权保护，发现本博客发布的信息包含有侵犯其著作权的链接内容时，请联系我，我将第一时间做相应处理,联系邮箱ffgign@qq.com。

作者：Mark Fan (小念头) 来源：http://cube.cnblogs.com
说明：未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如有疑问，可以通过 ffgign@qq.com 联系作者，本文章采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可