Menu
I am developing a web page capturer and find that some stylesheet rules of a web page captured from Reddit.com are lost.
After a further investigation I found that the source HTML code of a Reddit.com page has a style element like this:
<style type="text/css" data-styled-components="..." data-styled-components-is-local="true">...</style>
When JavaScript has been on, the style element is processed by the script and be emptied:
<style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style>
And that's why my capturer failed to get the stylesheets.
When the content of a style element is changed by script, the document stylesheet of the page would normally change accordingly and the page would be re-rendered to reflect the change.
However, for the Reddit.com page, after the style element is emptied, its stylesheet rules can still be accessed via document.styleSheets[1].cssRules, while document.styleSheets[1].ownerNode.textContent is "".
Additionally, if I modify the style element by running a script like document.styleSheets[1].ownerNode.textContent = "/*null*/", document.styleSheets[1].cssRules becomes empty and the web page is re-rendered, just like what my capturer has got.
I am confused by the bizarre behavior. I'd like to know why and how the Reddit.com page keep the styles after emptying the style element. Any information is appreciated.
975
The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.
To create a single element text, use the HTML *span]” tag, which is an empty space on the page. In other words, you add each letter to your text in its own unique element, creating a multicolor text.
Use the style. removeProperty() method to remove CSS style properties from an element, e.g. box. style. removeProperty('background-color') .
CSS rules of a <style> element sheet can be inserted, added or modified programmatically, where the .textContent of the <style> element returns an empty string "" if CSS text is not set at or appended to the <style> element.
<!DOCTYPE html>
<html>
<head>
<style id="style"></style>
</head>
<body>
<div>abc</div>
<p>123</p>
<script>
const style = document.querySelector("#style");
const {sheet} = style;
sheet.insertRule("div{color:blue}", 0);
sheet.addRule("p", "color:green", 1);
console.log(style.textContent);
style.textContent = "";
console.assert(style.textContent.length > 0, [style.textContent]); // assertion failed
console.log(style.textContent === ""); // true
</script>
</body>
</html>See also Modify element :before CSS rules programmatically in React
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
