• 第88天:HTML5中使用classList操作css类


           在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类。

    一、Element.classList

    这个classList对象里有很多有用的方法:

    1 {
    2     length: {number}, /* # of class on this element */
    3     add: function() { [native code] },
    4     contains: function() { [native code] },
    5     item: function() { [native code] }, /* by index */
    6     remove: function() { [native code] },
    7     toggle: function() { [native code] }
    8 }

    正如你上面看到的,Element.classList类很小,但里面的每个方法都很有用。

    1、新增CSS类

    使用add方法,你可以往页面元素是新增一个或多个css类:

    myDiv.classList.add('myCssClass');<span style="font-family:SimSun;"></span>

    2、删除一个CSS类

    使用remove方法,你可以删除单个CSS类:

    myDiv.classList.remove('myCssClass');<span style="font-family:SimSun;"></span>

    你可以在这个方法里一次传入多个类名,用空格分开,但执行的结果很有可能不是你预期的。

    3、反转CSS类的有无

    myDiv.classList.toggle('myCssClass'); //现在是增加
    myDiv.classList.toggle('myCssClass'); //现在是删除

    注意:
    • toggle 切换一个class ,element.toggle('class-name',[add_or_remove]
    • toggle函数的第二个参数true为添加,false为删除

    这个方法的作用就是,当myDiv元素上没有这个CSS类时,它就新增这个CSS类;如果myDiv元素已经有了这个CSS类,它就是删除它。就是反转操作。

    4、检查是否含有某个CSS类

    myDiv.classList.contains('myCssClass'); //returns true or false

    目前所有的现代浏览器(火狐浏览器,谷歌浏览器等)都支持这个classList类,所以,相信新型的javaScript类库里都会使用classList类来操作页面CSS类,而不需像以前一样去分析元素节点的class属性!

  • 相关阅读:
    投票协议:二进制表示方法
    投票协议:构建和解析协议消息
    多任务处理:多线程
    通信:成帧与解析
    通信:组合输入输出流
    跨越FSO WSH写文件
    MS07004漏洞
    解决ASP(图像)上传漏洞的方法
    让硬件入侵不再是神话
    解决ASP(图像)上传漏洞的方法
  • 原文地址:https://www.cnblogs.com/le220/p/7858385.html
Copyright © 2020-2023  润新知