当前位置： 首页 > Js > 操作 class 属性

操作 class 属性

 www.zhblog.net  2021-01-30

如果需要改变元素的许多样式，透过程序方式逐一设定并非好的方式，简便的方式是定义样式表，并透过选择器（selector）来符合元素，直接使用样式表改变元素的多个样式。元素的class属性是来为元素作分组，也经常作为样式表套用的依据，透过操作元素的className特性，是改变样式套用最常用的一个方式。

class属性可以设罝多个类，比较麻烦的地方在于，若有多个类设定，类与类之间，必须是空白作为区隔，所以，若想确定class属性中是否设置了某个类，则必须解析这个以空白作区隔的字符串，若要新增或删除类，必须修改这个字符串。

下面这个范例示范了测试类是否存在、新增、删除与切换类的三个函数：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
        .released {
            border-width: 1px;
            border-color: red;
            border-style: dashed;
        }

        .pressed {
            border-width: 5px;
            border-color: black;
            border-style: solid;
        }
  </style>

</head>
<body>

  <img id="logo" class='released' 
       src="https://openhome.cc/Gossip/images/caterpillar_small.jpg">  

<script type="text/javascript">

    function hasClass(elem, clz) {
        let clzs = elem.className;
        if(!clzs) {
            return false;
        } else if(clzs === clz) {
            return true;
        }
        return clzs.search(`\\b${clz}\\b`) !== -1;
    }

    function addClass(elem, clz) {
        if(!hasClass(elem, clz)) {
            if(elem.className) {
                clz = ` ${clz}`;
            }
            elem.className += clz;
        }
    }

    function removeClass(elem, clz) {
        elem.className = elem.className.replace(
          new RegExp(`\\b${clz}\\b\\s*`, 'g'), '');
    }

    function toggleClass(elem, clz1, clz2) {
        if(hasClass(elem, clz1)) {
            removeClass(elem, clz1);
            addClass(elem, clz2);
        }
        else if(hasClass(elem, clz2)) {
            removeClass(elem, clz2);
            addClass(elem, clz1);
        }
    }

    document.getElementById('logo').onclick = function() {
        toggleClass(this, 'released', 'pressed');
    };

</script>  

</body>
</html>

按我观看结果。


展开阅读全文