1. 程式人生 > >JavaScript 修改 CSS 偽類屬性

JavaScript 修改 CSS 偽類屬性

添加 var 偽類 fun 屬性 append 覆蓋 com element

背景

有時候我們希望通過JS代碼控制偽類屬性, 確苦於對策
實際上可通過向document.head中添加style子元素來實現

演示

        function css(style_text) {
            var s = document.createElement('style');
            s.innerText = style_text;
            document.head.appendChild(s);
        }

        document.onclick = function() {
            // 添加新的style元素, 覆蓋原來的屬性, 從而達到修改的目的
            css("button:hover {color: red;}");
        };

當鼠標懸停時
技術分享圖片
點擊頁面, 添加新的偽類button:hover, 此時再次在按鈕上猶豫時, 按鈕文本顏色發生了變化
技術分享圖片

JavaScript 修改 CSS 偽類屬性