1. Reason:
This article originated from a question in the OSC community about how to use jq to obtain pseudo elements. My first thought is that the powerful CSS Query should be able to obtain pseudo elements.
However, in fact, CSS Query cannot. That is, we cannot obtain the :before pseudo-element through $(":before"), $(dom).find(":before") or document.querySelector(":before").
To do this, I had to re-understand pseudo-elements (Pseudo-elements). Why can't we directly get pseudo elements using JS?
For example, the ::before and ::after pseudo-elements are used to insert content into the head or tail of an element in CSS rendering. They are not bound by the document and do not affect the document itself, but only affect the final style. These added content will not appear in the DOM, but will only be added in the CSS rendering layer.
In fact, pseudo-elements can be rendered by the browser, but they are not DOM elements themselves. It doesn't exist in the document, so JS can't manipulate it directly. jQuery's selectors are all based on DOM elements, so they cannot directly operate pseudo-elements.
How to manipulate the style of pseudo elements?
For this reason, I decided to summarize the methods of controlling pseudo elements in JS for easy reference in the future.
2. What are the pseudo elements:
First of all, let’s briefly talk about what pseudo-elements are. There are six pseudo-elements, namely ::after, ::before, ::first-line, ::first-letter, ::selection, ::backdrop.
The most commonly used pseudo-elements in major web pages are ::after and ::before.
For the semantics of these pseudo-elements, please refer to my other article "CSS Pseudo-Element Selector Summary".
In CSS3, it is recommended that pseudo-elements use two colons (::) syntax instead of one colon (:) in order to distinguish pseudo-classes and pseudo-elements. Most browsers support both presentation syntaxes. Only ::selection can always start with two colons (::). Because IE8 only supports single colon syntax, if you want to be compatible with IE8, the safest way is to use a single colon.
3. Get the attribute value of the pseudo element:
To obtain the attribute value of a pseudo element, you can use the window.getComputedStyle() method to obtain the CSS style declaration object of the pseudo element. Then use the getPropertyValue method or directly use key-value access to obtain the corresponding property value.
Syntax: window.getComputedStyle(element[, pseudoElement])
parameters are as follows:
element (Object): the DOM element where the pseudo element is located;
pseudoElement (String): Pseudo element type. Optional values are: ":after", ":before", ":first-line", ":first-letter", ":selection", ":backdrop";
For example:
// CSS代码
#myId:before {
content: "hello world!";
display: block;
width: 100px;
height: 100px;
background: red;
}
// HTML代码
<div id="myId"></div>
// JS代码
var myIdElement = document.getElementById("myId");
var beforeStyle = window.getComputedStyle(myIdElement, ":before");
console.log(beforeStyle); // [CSSStyleDeclaration Object]
console.log(beforeStyle.width); // 100px
console.log(beforeStyle.getPropertyValue("width")); // 100px
console.log(beforeStyle.content); // "hello world!"Remarks:
1. Both getPropertyValue() and direct key-value access can access CSSStyleDeclaration Object. The differences between them are:
For float attributes, if you use key-value access, you cannot use getComputedStyle(element, null).float directly, but cssFloat and styleFloat;
If you use key-value access directly, the attribute key needs to be written in camel case, such as: style.backgroundColor;
The getPropertyValue() method does not have to be written in camel case (camel case is not supported), for example: style.getPropertyValue("border-top-color");
The getPropertyValue() method is supported in IE9+ and other modern browsers; in IE6~8, you can use the getAttribute() method instead;
2. The default pseudo element is "display: inline". If the display attribute is not defined, even if the width attribute value is explicitly set to a fixed size such as "100px" in CSS, the finally obtained width value is still "auto". This is because the width and height of inline elements cannot be customized. The solution is to modify the display attribute of the pseudo element to "block", "inline-block" or other.
4. Change the style of pseudo-element:
Method 1. Change the class to change the attribute value of the pseudo element:
Give me an example:
// CSS代码
.red::before {
content: "red";
color: red;
}
.green::before {
content: "green";
color: green;
}
// HTML代码
<div class="red">内容内容内容内容</div>
// jQuery代码
$(".red").removeClass('red').addClass('green');Method 2. Use insertRule of CSSStyleSheet to modify the style of pseudo-elements:
Give me an example:
document.styleSheets[0].addRule('.red::before','color: green'); // 支持IE document.styleSheets[0].insertRule('.red::before { color: green }', 0); // 支持非IE的现代浏览器Method 3. Insert the internal style of