伪元素不是DOM的一部分.因此,您无法通过JS直接更改其CSS属性.
为了以你想要的方式获得你想要的效果,我最好的猜测是YUI.StyleSheet并操纵样式表本身,虽然我不得不承认我近年来没有自己测试过.
包括这样的实用程序并进行所有这些计算似乎对宽度匹配有很多工作.
如果您愿意在语义HTML上略微妥协,那么有一种可行的技术:
您的元素占据屏幕的整个宽度.使用跨度包装文本并将伪元素添加到该文本,作为内联块应该允许您仅在文本下获取边框
HTML:
Hello World
CSS:
.title {
border-bottom: 3px solid #aaa;
position: relative;
}
.title span{
display:inline-block;
position:relative;
}
.title span:after {
content: "";
width: 100%;
border-bottom: 3px solid red;
display: block;
position: absolute;
}
备查:
这样,如果推荐被批准和实施,则有可能让伪元素反映父项的属性,如下所示:
this.setAttribute("length", $(this).textWidth());
和相关的CSS:
.title:after {
...
width: attr(length px);
...
}