跨平台移动开发 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
- 1
- 2
给second li元素集中的每个元素增加一个class
- 3
- 4
- 5
检查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 中国大陆许可协议进行许可
.jpg)
