
nth-of-type()可以判断奇偶,虽然有可能低版本IE不支持,但是视觉效果的话低版本放弃就完了。
<style>
ul li:nth-of-type(odd){奇数行样式}
ul li:nth-of-type(even){偶数行样式}
<style>
如果我说服不了你,一定要js的话,那么继续:
<script id="jquery_182" type="text/javascript" class="library"
src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
<meta charset="utf-8" />
<ul id="list">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<script>
function CheckLI() {
var obj = document.getElementById("list").getElementsByTagName("li")//取得#list下所有li
for(var i=0i<obj.lengthi++){//循环出每个li
//下面两句中添加class用的jquery的addClass()方法,需要载入JQ才支持,js原生的方法需要IE10才支持,兼容的方法要另外写函数,手打的,直接最简单的JQ实现
if(i % 2 == 0) {$(obj[i]).addClass("ou")}//如果被2整除是偶数
else {$(obj[i]).addClass("ji")}//否则是奇数
}
}
window.onload = CheckLI//网页载入后执行以上函数
</script>
<style>
.ji{color: red}
.ou{color: yellow}
</style>
1.1 数据属性(`properties`),对象的普通属性将字符串名称映射到值。例如,下面对象obj有一个数据属性,名称为 prop,对应的值为 123:var obj = {prop: 123}可以用以下方式读取属性的值:console.log(obj.prop)// 123,console.log(obj["prop"])// 123,当然也可以用以下方式来设置属性的值:obj.prop = "abc"obj["prop"] = "abc"
1.2 访问器属性,另外,可以通过函数处理获取和设置属性值。 这些函数称为访问器函数。 处理获取的函数称为getter。 处理设置的函数称为setter:var obj = {get prop () {return 'Getter'},set prop (value) {console.log('Setter: ' + value)}}访问 obj 属性:>obj.prop'Getter'>obj.prop = 123Setter: 123。
1.3 内部属性一些属性只是用于规范,这些属于“内部”的属性,因为它们不能直接访问,但是它们确实影响对象的行为。内部属性有特殊的名称都写在两个方括号,如:内部属性[[Prototype]]指向对象的原型。它可以通过Object.getPrototypeOf()读取。它的值只能通过创建具有给定原型的新对象来设置,例如通过object.create()或__proto__ 。
内部属性[[Extensible]]决定是否可以向对象添加属性。可以通过Object.isExtensible() 方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)。可以通过Object.preventExtensions()方法让一个对象变的不可扩展,也就是永远不能再添加新的属性。
属性特性(attribute),属性的所有状态,包括数据和元数据,都存储在特性(attribute)中。它们是属性具有的字段,就像对象具有属性一样。特性(attribute)键通常用双括号编写:
使用jquery的伪类选择器,例如$("选择器 :odd").css("background","#0f0")//奇数行
$("选择器 :even").css("background","#ff0")//偶数行
若是用原生js就要判断,例如
for(var i = 0i <元素行数i++){
if(i%2 == 0){
//奇数行代码
}else{
//偶数行代码
}
}
而且用css也可以添加奇偶数行的样式,例如元素为tr的奇偶设置
tr:nth-child(odd){background:#0f0}
tr:nth-child(even){background:#ff0}
nth-of-type伪类选择器也能实现此效果。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)