动态修改 dom 元素的伪类样式

 

    最近写代码，需要修改伪类的 content 属性，不想定义两个样式进行切换，而是直接通过 js 进行修改。

html 中的伪类（如 a:hover / a:link / class::before / clss::after 等），因为不是 dom 元素，所以

不能直接通过 js 修改其属性，虽然可以通过 切换 dom 元素的 css 样式名进行修改，但是这样就比较复杂了。

 

参考了一个 帖子 然后进行了一些修改，大概思路如下：

这里使用  windows 8 的工程，js 代码直接写在 default.js 文件中。

1、在 html 页面中，添加一个 span 和一个 button：

<span id="span_test">span>

<br />

<input type="button" value="改变" onclick="changeContent()" />

2、在样式表中，定义这个 span 的显示样式：

#span_test::before{
    content: attr(data-content);
}

3、在页面 UI 加载完成的事件中，给元素添加 data-content 属性（幸亏 html5 提供了 data- ）：

 args.setPromise(WinJS.UI.processAll().then(function () {

     // 可以把 data-content='流畅' 直接放在 html 文件中的 span 标签上
     document.getElementById("span_test").setAttribute("data-content", "高清");
 
 }));

4、当单击按钮时，修改 span 元素的 data-content 属性：

function changeContent() {

    document.getElementById("span_test").setAttribute("data-content", "流畅");
   
}

显示效果：

默认：

 

单击按钮：

 

 

demo 下载：dom_content（js修改元素的伪类）

转载于:https://www.cnblogs.com/hebeiDGL/p/4128599.html