Modifying the Pseudo-class style of DOM elements dynamically

Recently write code, you need to modify the pseudo-class content property, do not want to define two styles to switch, but directly through JS to modify.

Pseudo-classes in HTML (such as A:hover/a:link/class::before/clss::after, etc.), because they are not DOM elements, so

It is not possible to modify its properties directly through JS, although it can be modified by toggling the CSS style name of the DOM element, but it is more complicated.

Referring to a post and then made some changes, probably the following ideas:

This works with Windows 8, where JS code is written directly in the Default.js file.

1. In the HTML page, add a span and a button:

<id= "Span_test"></span><  /><type= "button"  value= "Change"  onclick= "changecontent ()"/>

2. In the style sheet, define the display style for this span:

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

3. In the event that the page UI is loaded, add the Data-content attribute to the element (fortunately HTML5 provides data-):

Args.setpromise (WinJS.UI.processAll (). Then (function  () {     //  can put data-content= ' Smooth ' document.getElementById ("Span_test") on the span label placed directly in the HTML file     . SetAttribute ("Data-content", "HD");  } ));

4. When you click the button, modify the Data-content property of the span element:

function changecontent () {    document.getElementById("Span_test"). SetAttribute ("Data-content", "fluent");   } 

Display effect:

Default:

Click the button:

Demo Download: dom_content (JS modified element Pseudo-Class)

Modifying the Pseudo-class style of DOM elements dynamically