www.zhblog.net

操作 class 属性


如果需要改变元素的许多样式,透过程序方式逐一设定并非好的方式,简便的方式是定义样式表,并透过选择器(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>

按我观看结果


展开阅读全文

评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 心情