首页 > 代码库 > 动态修改 dom 元素的伪类样式

动态修改 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修改元素的伪类)

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