`
sohighthesky
  • 浏览: 34704 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

classList属性,class样式列表和操作方法

阅读更多
firefox3.6新增(目前2010-6-5貌似没有其它浏览器支持)HTMLElement.classList属性
方便 了对class样式的操作

<div class="a c" id="test">test</div>


var test=document.getElementById("test");
if('classList' in test){
    var cl=test.classList;
    document.write(typeof(cl));//object
    cl[0]="c";//只读,所以下面仍然输出a
    document.write(cl[0]);
    /*
    cl.item(idx);//返回第几个样式名称
    cl.contains();//判断是否包含class样式
    cl.add();//添加class样式
    cl.remove();//移除class样式
    cl.toggle();//切换class样式
    */
}

相关链接:
https://developer.mozilla.org/en/DOM/element.classList
https://developer.mozilla.org/en/DOM/DOMTokenList
0
1
分享到:
评论

相关推荐

    详解使用HTML5的classList属性操作CSS类

    以前我们有需要用js或jquery的一些方法hasClass、addClass、removeClass,在一个元素的class属性上添加或者删除某几个类,达到某种样式变化的需求,但还是稍微麻烦了一些。 h5新增的classList可以让我们更方便的元素...

    vue--点击当前增加class,其他删除class的方法

    今天小编就为大家分享一篇vue--点击当前增加class,其他删除class的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    vue实现样式之间的切换及vue动态样式的实现方法

    前言 既然我们选择了vue,那么在做东西时就不要想着去操作dom,所有的都交给vue来解决。 下面来说一个很简单但是很...div v-for=(list,index) in navLists class=nav :class={ red:changeRed == index} @click=reds(in

    Eclipse_Swt_Jface_核心应用_部分19

    5.5 列表框(List) 69 5.5.1 列表框的样式 69 5.5.2 列表框程序示例 70 5.5.3 常用的方法 73 5.6 组合框(Combo) 74 5.6.1 组合框的样式 75 5.6.2 组合框程序示例 75 5.6.3 组合框的常用方法 77 ...

    flex3的cookbook书籍完整版dpf(包含目录)

    设置State的样式和属性 11.2节. 为进入和离开States创建Transitions 11.3节. 使用AddChildAction和RemoveChildAction 11.4节. 为特定类型的子节点过滤Transitions 11.5节. 对指定组件应用局部Transition 11.6节. ...

    python入门到高级全栈工程师培训 第3期 附课件代码

    02 集合定义和基本操作方法 03 集合关系运算交,差,并集 04 集合的其他内置方法 05 集合补充 06 百分号字符串拼接 07 format字符串格式化 08 数学意义的函数与python中的函数 09 为何要有函数 10 函数返回值 11 可...

    VUE中V-IF条件判断改变元素的样式操作

    方法一 v-if判断后用标签改变样式(特定显示列字体加粗) (col,i) in cols'&gt; &lt;v&gt;&lt;b&gt;{{col.text}}&lt;/b&gt;&lt;/v&gt; &lt;v class='align-end mystyle'&gt;&lt;b&gt;{{item[col['value']]}} &lt;/v-list-i

    在一小时内学会 C#(txt版本)

    对 C++ 来说,前面例子中 Date 类的属性就是 day、month 和 year,而你添加了 Get 和 Set 方法。C# 提供了一种更加便捷、简单而又直接的属性访问方式。 所以上面的类应该写成这样: 复制内容到剪贴板 代码: using ...

    Javashop开发规范V2.2

    EOP自动为应用提供表单校验功能,通过指定form样式名和指定表单项特定属性的方式来完成。 5.3.1 示例 代码示例 [removed] function checkUserName(val){ if(val=='kingapex' ) return true; else return ...

    arcgis工具

    arcgis工具总结 1. 要素的剪切与延伸 实用工具 TASK 任务栏 Extend/Trim feature 剪切所得内容与你画线的方向有关。 2. 自动捕捉跟踪工具 ...例如,使用包含(Contain)方法,即使湖泊的边界和包含该...

    xheditor-1.1.14

    方法1:利用class属性来初始化和传递各种初始化参数,例: class="xheditor {skin:'default'}" 方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例: $('#elm1').xheditor(); ...

    Java面试宝典2020修订版V1.0.1.doc

    33、怎么获取类中所有的方法,所有属性 77 34、JDBC常用接口有哪些? 77 35、Statement 中execute、executeUpdate、executeQuery这三者的区别 78 36、jdbc中怎么做批量处理的? 80 37、什么是json 83 38、json与xml...

    jQuery完全实例.rar

    这个函数的作用如同$(document).ready()一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说,这个函数是可链接的--但真正以这种方式链接的情况并不多...

    ZendFramework中文文档

    4.3.4. Zend_Cache_Frontend_Class 4.3.4.1. Introduction 4.3.4.2. Available options 4.3.4.3. Examples 4.3.5. Zend_Cache_Frontend_File 4.3.5.1. Introduction 4.3.5.2. Available options 4.3.5.3. ...

    asp.net知识库

    动态调用对象的属性和方法——性能和灵活性兼备的方法 消除由try/catch语句带来的warning 微软的应试题完整版(附答案) 一个时间转换的问题,顺便谈谈搜索技巧 .net中的正则表达式使用高级技巧 (一) C#静态成员和...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

    在XML文档中,我们可以将每一个标识元素看作一个对象---它有自己的名称和属性。 XML创建了标识,而DOM的作用就是告诉script如何在浏览器窗口中操作和显示这些标识 上面我们已经简要的讲述了一些XML的基本原理,...

Global site tag (gtag.js) - Google Analytics