如何动态操作修改伪类的属性

Question

如果希望通过Js或其他方法来修改宽度值为80%;
应该怎么做呢，求大神指点，以前从没遇到过这样的项目需求？

Answer 1

sheet:document.styleSheets[0],
selectorText:选择器,
cssText:css代码,
position:0

function insertRule(sheet, selectorText, cssText, position) {
            if (sheet.insertRule) {
                sheet.insertRule(selectorText + "{" + cssText + "}", position);
            } else if (sheet.addRule) {
                sheet.addRule(selectorText, cssText, position);
            }
        }
        
    如：    insertRule(document.styleSheets[0], ele+':before', 'width:10px', 0);

Answer 2

这种需求应该是某一事件触发以后才会改的把，比如是点击事件（click），或者是改变事件（change），在事件中可以通过js来获取某一class元素或者通过标签也可以，对这个元素的css属性进行修改即可

Answer 3

你可以这样写你的伪类：
html

<p data-width="20px"><p>

css

p::after {
  width: attr(data-width);
}

js

var _p = document.getElementsByTagsName('p')[0];// 先获取元素
_p.onmouseover = function(e) {
  _p.dataset.width = "50px";
}

Answer 4

可以修改伪类的父元的class，通过css控制样式