zoukankan      html  css  js  c++  java
  • js-classList修改class属性

    classList定义与用法

    1)classList属性返回元素的类名,作为DOMTokenList对象

    2)该属性用于在元素中添加,移除及切换css类

    3)classList属性是只读的,但可以用add()和remove()方法修改他。

    方法:

    1.添加class属性--add()

    方法:add(class1,class2,...)

    描述:1.在元素中添加一个或多个类名;2.如果指定的类名已存在,则不会添加

    1).增加一个class

       document.getElementById("p").classList.add("p-a-0");

       ----<p id="p" class="p1 addp1 p-a-0">白色的范畴你傻逼</p>

    2).增加多个class

       document.getElementById("p").classList.add("p-a-0","p-a-1","p-a-2" );

       ----<p id="p" class="p1 addp1 p-a-0 p-a-1 p-a-2">白色的范畴你傻逼</p>

    2.删除class="addp1"--remove()

    方法:remove(class1,class2,...)

    描述:移除一个或多个class(移除不存在的class,不报错)

    1).移除一个class

          document.getElementById("p").classList.remove("addp1");

         ----<p id="p" class="p1">白色的范畴你傻逼</p>

    2).移除多个class

          document.getElementById("p").classList.remove("addp1",“p1”);

         ----<p id="p">白色的范畴你傻逼</p>

    3.在元素中切换类名---toggle()

    方法:toggle(class,true/false)

    描述:在元素中切换类名。

               第一个参数为要在元素中添加类名,并返回false。如果该类名不存在则会在元素中添加类名,并返回true.

               第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在。列如:

    移除一个class:    element.classList.toggle("classToRemove",false)

    添加一个class:    element.classList.toggle("classToRemove",true) 

    注意: Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数           

     1). document.getElementById("p").classList.toggle("newClassName");         

    4.实例:获取元素的类名

    <div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

    var x = document.getElementById("myDIV").classList;

    返回结果:x----mystyle anotherClass thirdClass

    5.判断元素是否存在某个class---contains()

    方法:contains(class)

    描述:返回布尔值,判断指定的类名是否存在。

               true:元素已经包含了该类

               false:元素中不存在该类

    1)实例:查看元素是否存在 "mystyle" 类:

          <div id="myDIV" class="mystyle anotherClass thirdClass">我是一个 DIV 元素</div>

           var x = document.getElementById("myDIV").classList.contains("mystyle");

           ----返回结果x---true

    6.返回类名在元素中的索引值。索引值从0开始---item()

    方法:item(index)

    描述:如果索引值在区间范围外则返回 null

    1).实例:获取 <div> 元素的第一个类名(索引为0):

     <div id="myDIV" class="mystyle anotherClass thirdClass">我是一个 DIV 元素</div>

      ----var x = document.getElementById("myDIV").classList.item(0);

      ----返回结果x---mystyle 

    属性:

    1.查看类名的个数--length

    属性:length

    描述:返回类列表中类的数量(只读)

    1.<p id="p" class="p1 addp1 p-a-0">白色的范畴你傻逼</p>

       ----document.getElementById("p").classList.length

       ----返回答案:3

  • 相关阅读:
    通过命令行指定 Java 程序运行时使用的字符集
    Ubuntu Linux 开启 root 用户及其它登录问题的解决
    SLF4J 的几种实际应用模式 SLF4J+Log4J 与 SLF4J+LogBack
    Java 获取当前时间的年月日方法
    Eclipse 全屏插件
    Linux 下的纯 C 日志函数库: zlog
    如何使用 Log4j
    DAO 设计模式
    为什么要用 /dev/null 2>&1 这样的写法
    NSDate和NSString之间的转换
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/7762682.html
Copyright © 2011-2022 走看看