类似如下的CSS声明：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#progress { background: #333; border-radius: 13px; height: 10px; width: 300px; padding: 3px; } #progress:after { content: ''; display: block; background: orange; width: 0%; height: 100%; border-radius: 9px; } |
HTML中的声明如下：
|
1 |
<div id="progress" style="text-align: center; margin-left: auto; margin-right: auto;"></div> |
需要动态修改CSS的width属性。
由于是伪元素样式，并不属于DOM对象,因此，我们没有办法直接通过JQuery来修改。
比较完美的解决方法如下：
定义如下函数，对样式表遍历，根据名称获取我们指定的样式对象
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function getRuleWithSelector(selector) { var numSheets = document.styleSheets.length; var numRules; var sheetIndex; var ruleIndex; // Search through the style sheets. for (sheetIndex = 0; sheetIndex < numSheets; sheetIndex += 1) { numRules = document.styleSheets[sheetIndex].cssRules.length; for (ruleIndex = 0; ruleIndex < numRules; ruleIndex += 1) { if (document.styleSheets[sheetIndex].cssRules[ruleIndex].selectorText === selector) { return document.styleSheets[sheetIndex].cssRules[ruleIndex]; } } } return null; } function isNull(arg) { return ((undefined == arg) || (null == arg) ||('' == arg)); } |
使用时候的代码如下：
|
1 2 3 4 |
var afterRule = getRuleWithSelector("#progress::after"); if (true != isNull(afterRule)){ afterRule.style.width = '20%'; } |