`
sohighthesky
  • 浏览: 35781 次
  • 性别: 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类

    然而,classList属性的引入使得这些操作变得更直接、更简洁。 **classList属性的兼容性** 需要注意的是,classList属性的兼容性并不完美,尤其是对于较老的Internet Explorer浏览器(IE10以下版本)并不支持。因此...

    前端项目-classlist.zip

    在不支持`classList`属性的老版本浏览器中,开发者通常需要使用字符串操作方法(如`className`的getter和setter)来管理类名,这种方式不仅繁琐且容易出错。`classList.js-master`项目就是为了解决这个问题,它提供...

    ClassList-HK列表编辑

    在IT领域,"ClassList-HK列表编辑"可能是一个自定义的编程组件或者库,用于处理和编辑列表数据。这个组件特别关注于提供一个可编辑的CtrlList控件,这通常意味着它允许用户在列表视图中直接进行数据的添加、删除、...

    使用classList来实现两个按钮样式的切换方法

    `classList`是一个DOM元素的属性,它提供了方便的方法来操作元素的CSS类列表,从而改变元素的样式。 首先,我们来看HTML部分。这里有两个链接(`&lt;a&gt;`标签)作为我们的按钮,分别具有`class`属性`mya1`和`mya2`,...

    前端学习笔记,做一个简单的网站-将class的属性值中的hide更换为show,学习代码

    `classList`属性提供了对元素类名的增删改查功能。 2. **CSS样式**:在CSS中,“hide”和“show”通常会定义不同的可见性规则。例如: ```css .hide { display: none; } .show { display: block; /* 或者 '...

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

    主要概念是通过改变一个响应式数据属性来控制元素的class,并利用Vue的双向绑定机制来响应用户操作,实现类的动态添加和移除。 在实际应用时,开发者需要注意以下几点: - 确保在模板中绑定事件和class时属性名...

    JS操作DOM元素属性和方法大全

    **JS操作DOM元素属性和方法大全** 在JavaScript中,DOM(Document Object Model)是一种标准,用于表示HTML或XML文档的结构,并提供了与这些文档交互的方法。DOM是浏览器提供的一种接口,使得JavaScript能够读取、...

    js 改变背景(backgroundImage)和 类名称(class)

    在JavaScript中,改变元素的背景图像(backgroundImage)和类名称(class)是常见的操作,这对于动态更新网页的样式和交互性至关重要。本文将详细探讨这两个主题,并提供实用的代码示例。 首先,我们来讨论如何使用...

    js实现class样式的修改、添加及删除的方法

    现代浏览器提供了`Element.classList`属性,该属性包含元素的所有class,并提供了一系列便捷的方法来操作它们。 - **classList.add("class"):** 添加一个或多个class。 - **classList.remove("class"):** 删除...

    使用HTML5里的classList操作CSS类

    classList对象包含了几个实用的方法,帮助我们轻松地完成添加、删除、检查和切换CSS类的操作。 1. `length`属性:这个属性返回元素上CSS类的数量。通过检查这个值,我们可以知道元素有多少个类名。 2. `add()`方法...

    示例4:操作节点属性.rar_javascript操作节点属性

    6. **类名操作**:`classList`属性提供了一组方法来操作元素的类名,如`add()`, `remove()`, `toggle()`, `contains()`等。例如,`document.getElementById('myElement').classList.add('active');` 7. **数据属性...

    CFListMFC_Class.rar_MFC list_MFC tree_class_list tree_tree list

    Gybrid Tree-List控件将两者结合起来,允许用户在一个控件中同时展示列表和树形结构的信息,提供了一种更丰富的用户交互体验。 **MFC列表视图(CListCtrl)** CListCtrl类提供了列表视图的功能,支持多种视图样式...

    JavaScript操作class和style样式代码详解

    需要注意的是,在操作class时要特别注意浏览器的兼容性问题,比如在IE8及以下的浏览器中,`classList`属性是不支持的,这就需要我们使用`className`属性配合正则表达式进行class的添加和删除。而在操作style时,除了...

    div class的内容追加

    在实际开发中,这通常涉及到DOM(Document Object Model)操作,比如`document.querySelector()`、`document.getElementsByClassName()`或`element.classList.add()`等方法。 至于标签“源码”和“工具”,这表明...

    如何用js判断dom是否有存在某class的值

    这里,我们首先尝试创建一个div元素,看它是否具有`classList`属性和`contains`方法。如果浏览器支持这些属性和方法,那么`hasClass`函数就会使用`classList.contains`来判断。如果不支持,则会回退到传统的字符串...

    MFC中开发属性页的使用

    在MFC(Microsoft Foundation Class)库中,属性页(Property Sheet)是一种常用的设计元素,用于组织和展示多个对话框(Dialog)界面,每个对话框代表一个独立的设置或配置页面。这种设计允许用户通过切换页面来...

    mui及索引列表indexedList,mui.picker.有索引列表具体教程

    首先需要引入相关的CSS和JS文件,然后在HTML结构中设置相应的元素,包括`&lt;div class="mui-indexed-list-indicator"&gt;`作为索引栏,以及`&lt;ul class="mui-table-view mui-indexed-list"&gt;`作为数据列表。每个列表项需要...

    JavaScript 操作CSS类

    除了直接操作元素的类,还可以使用`classList`属性来获取或设置整个类列表。例如,`element.classList.toString()`将返回所有类的字符串表示,而`element.classList = ['class1', 'class2']`则可以一次性替换所有类...

    详解用JS添加和删除class类名

    - `classList`方法只对元素的`class`属性进行操作,不会影响其他属性或样式。 总之,`classList`是JavaScript中操作元素CSS类名的强大工具,简化了动态修改页面样式的流程。理解并熟练运用`classList`,能提高我们...

Global site tag (gtag.js) - Google Analytics