How do I read and write pseudo-class Element styles ?, Read/write pseudo element styles

How do I read and write pseudo-class Element styles ?, Read/write pseudo element styles

Example:

Html code

1. <P class = "example" data-pseudo = "(I'm content.)"> Hi, this is a plain-old, sad-looking paragraph tag. </p>
2. <Div id = "log"> </div>
4. <Style>
5. . Example: before {
6. Content: 'false ';
7. Color: red;
8. }
9. </Style>

1. Read data using the window. getComputedStyle method: 

Js Code

1. <Script>
2. Var str = window. getComputedStyle (document. querySelector ('. example'), ': before'). getPropertyValue ('color ');
4. Document. querySelector ('# log'). innerHTML = str;
6. </Script>

Ii. Write (modify) 

No way. At least there is no direct method, and we can only achieve our goal by overwriting the style.
For example, add a style element and write a new style, or add different classes to the target element to achieve the control effect.

Example:

Html code

1. <Style id = "pseudo dostyle">
2. </Style>

Js Code

1. <Script>
2. Document. querySelector ('# pseudo style'). sheet. insertRule (". example: before {color: green;}", 0 );
3. // Or
4. Document. querySelector ('# pseudostyle'). sheet. addRule ('. example: before ', 'color: green ');
6. // SetProperty will throw an exception at this time:
7. Try {
8. Window. getComputedStyle (document. querySelector ('. example'), ': before'). setProperty ('color', "green ");
9. } Catch (e ){
10. Document. querySelector ('# log'). innerHTML = e;
11. }
12. </Script>

A pseudo-class element has a special attribute: content. Because its value can be defined to be obtained from the dom attribute of the element, it can implement direct reading and writing of js.
For example:

Html code

1. <Style>
2. . Example: before {
3. Content: attr (data-pseudo );
4. Color: red;
5. }
6. </Style>

Js Code

1. <Script>
2. Document. querySelector ('. example'). setAttribute ("data-pseudo", "new content! ");
3. </Script>

Appendix:
1. styleSheet object method, attributes and browser compatibility, refer to: http://help.dottoro.com/ljpatulu.php
2. getComputedStyle method, reference: http://help.dottoro.com/ljscsoax.php, https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle