如何通过js在li的奇偶或单双标签中增加class?

如何通过js在li的奇偶或单双标签中增加class?,第1张

如果只是个视觉修饰而不是逻辑功能的话,能用css实现的效果就不要用js去做,css3的选择器:

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>

Jquery 怎么只给点击的元素加个class?1:新建一个html文件,命名为test.html,用于讲解jquery如何实现追加元素的同时添加class属性。

2:在test.html文件内,使用p标签创建一行测试的内容,并创建两个空div标签。

3:在test.html文件内,使用button标签创建一个按钮,给button按钮绑定onclick点击事件,当按钮被点击时,执行addPp()函数。

4:在函数内,通过获得p标签对象,使用appendTo方法将p标签追加到div中。

5:在函数内,再使用addClass方法给p标签添加一个class属性。

6:在浏览器打开test.html文件,点击按钮,查看结果。

以给 body 标签添加 class 为例

通过 jQuery

$( 'body').addClass( 'class1 class2' )

$( 'body' ).removeClass( 'class1 class2' )

支持 classList 的高级浏览器(IE10+,Chrome,Firefox,Safari)

document.body.classList.add( 'class1', 'class2' )

document.body.classList.remove( 'class1', 'class2' )

不支持 classList 的浏览器只能通过 className 来添加

document.body.className += ' cl

[1]直接把样式赋值给className

var odiv=document.getElementById('div1')

odiv.className= div3

//这样我们会得到 class ="div3" 会直接把div2样式给覆盖掉

[2]使用累加赋值给className

var odiv=document.getElementById('div1')

odiv.className+=" "+div3  //样式和样式之间需要空隙 ,所以加个空字符串隔开

//这样可以得到 class="div2 div3" 可以正常增加,但是我们在添加样式的时候我们得考虑下他本身之前有没有同名的样式,如果有我们添加的话就会变成累赘 比如class="div2 div3 div3"

[3]检测样式原先之前是否有相同的样式

var odiv=document.getElementById('div1') 

function hasClass(element,csName){

element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'))//使用正则检测是否有相同的样式

}

[4]在[3]的基础上我们就可以进行判断性给元素添加样式了 

var odiv=document.getElementById('div1') 

function hasClass(element,csName){

return  element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'))//使用正则检测是否有相同的样式

} 

function addClass(element,csName){

if(!hasClass(element,csName)){

element.className+=' '+csName


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11647816.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存