classList属性

1、传统方法：

在操作类名的时候，需要通过className属性添加、删除和替换类名。如下面例子：

1	`<div` `class="bd user disabled">...</div>`

这个div中一共有三个类名，要从中删掉一个类名，需要把这三个类分别拆开，然后进行处理，处理过程如下：

<script type="text/javascript">

var className=div.className.split(/\s+/);

//找到要删掉的类名

var pos=-1,

i,len;

for (var i = 0; i < className.length; i++) {

if(className[i]=="user"){

pos=i;

break;

}

};

className.splice(i,1);

div.className=className.join(" ");//将余下的类名重新拼装

</script>

上述方面即为传统的方法。

2、html5新增方法classList(),可以完全摆脱className属性。

具体使用案例如下：

<title>classList Example</title>

<style>

.highlight {

background: yellow;

}

</style>

<div id="myDiv" class="init">Hello world!</div>

<input type="button" value="Add class" onclick="addClass()">

<input type="button" value="Remove class" onclick="removeClass()">

<input type="button" value="Toggle class" onclick="toggleClass()">

<input type="button" value="Contains class?" onclick="containsClass()">

<p>This demo works in Firefox 3.6 and Chrome 8.</p>

<script type="text/javascript">

function addClass(){

var myDiv = document.getElementById("myDiv");

myDiv.classList.add("highlight");

}

function removeClass(){

var myDiv = document.getElementById("myDiv");

myDiv.classList.remove("highlight");

}

function toggleClass(){

var myDiv = document.getElementById("myDiv");

myDiv.classList.toggle("highlight");

}

function containsClass(){

var myDiv = document.getElementById("myDiv");

alert(myDiv.classList.contains("highlight"));

}

</script>

注：但是目前classList属性只有FireFox3.6+和Chrome支持。

参考链接：http://www.2cto.com/kf/201409/331425.html

时间： 2024-10-01 03:23:44

classList属性的相关文章

HTML5实战与剖析之classList属性

classList属性究竟是干什么的,我们先撇下classList不管.我们考虑这么一个问题,那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法.将拥有类名li.meng和long,三个类名中的类名meng删除.代码如下 HTML代码 view source print? 1.<div class="li meng long">梦龙小站</div> JavaScript代码 view source print? 01.

javascript高级程序设计---classList属性

1.传统方法: 在操作类名的时候,需要通过className属性添加.删除和替换类名.如下面例子: <div class="bd user disabled">...</div> 这个div中一共有三个类名,要从中删掉一个类名,需要把这三个类分别拆开,然后进行处理,处理过程如下: <script type="text/javascript"> var className=div.className.split(/\s+/); //

脚本化CSS类-HTML5 classList属性

HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设置和清除元素的className属性来为元素添加或移除attention类 function grabAttention(e){e.className="attention";} function releaseAttention(e){e.className="";}

200 classList 属性

classList属性是HTML5新增的一个属性,返回元素的类名.但是ie10以上版本支持. 该属性用于在元素中添加,移除及切换 CSS 类.有以下方法添加类: element.classList.add('类名'): focus.classList.add('current'); 移除类: element.classList.remove('类名'); focus.classList.remove('current'); 切换类: element.classList.toggle('类名')

html 操作dom classLIst 属性

1.classList 属性可以给指定的dom 增加多个class,他是只读的,只可以使用 add() 和 remove() 方法修改. eg: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass"); 具体见菜鸟教程:https://www.runoob.com/jsref/prop-element-cl

HTML DOM classList 属性

页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加类(add) document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").cla

HTML5新特性:元素的classList属性与应用

在html5新增的classList之前, 操作元素的class用的是className这个属性,而如果要向jquery封装的hasClass, removeClass, addClass, toggleClass一样优雅的操作calssName, 在以前我们要对className封装处理,如下, 下面的代码你未必能看得懂运行流程,但应该能看懂功能部分,这几段函数是取自我录制的一套视频中,讲解DOM框架封装的一部分 gQuery.prototype.hasClass = function (ob

JS基础篇--HTML DOM classList 属性

classLIST元素增删改查方法

window.onload=function () { var oDiv=document.getElementsByTagName('div')[0]; var oInP=document.getElementsByTagName('input')[0]; var aDiv=new classList(oDiv); oInP.onclick=function(){ aDiv.add('ha'); alert(oDiv.className); }}/*如果e有classList属性则返回它,否则