跨平台移动开发 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' });

示例代码

100

101

102

103

104

105

106

107

108

109

110

111

112

113

<!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 中国大陆许可协议进行许可