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

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

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

 

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

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

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

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 下载：