A statement on the address bar changes the style of the page. (Tutorial)_javascript skills

You can first paste the following statement into the address bar, then press Enter to see the effect.

javascript:with(document.body){background="";bgColor="#779966";text="#bb4400"};void(document.styleSheets[0].addRule("TD", "border:1 solid black;background-color:#eef9ee!important"))

The following is the explanation:

1.javascript:url
Pseudo url technology. It applies to all tags that include href and src attributes: if an attribute can accept a url as its value, it can accept this javascript:url. The address bar is equivalent to location.href, so it is no exception. :)

2. Return value
Most js statements will have a return value. Here we do not need the return value to avoid passing it to the href attribute to make location.href work.
We can use alert, which does not produce a return value but calculates expressions, to achieve our goal: use the statement as the parameter of alert and let alert execute it.
But using alert will pop up the final result of the calculation (that is, the final return value of the statement segment). We do not need a pop-up box, we only need the statement to be executed quietly, and there is no return value. The void operator is exactly what we need.

3. Let’s talk about the return value
In the sequentially executed statement segment, if each sentence has a return value, and a certain attribute (such as href) can only receive one return value, which one will it receive? What about a return value? The answer is the last one. Therefore, we only need to add void to the last sentence.

4.with statement
The with statement can set the default object for a statement segment enclosed in braces to reduce the amount of code. The above with(document.body){background="";bgColor="#779966";text="#bb4400"}
is equivalent to:
document.body.background=""
document .body.bgColor="#779966"
document.body.text="#bb4400"

5. Add new rules for the defined style sheet
document.styleSheets[0].addRule ("TD","border:1 solid black")
The above statement adds a rule to the first style sheet object in the page: let all table cells have a pixel-wide black solid border .
styleSheets is a collection of all and elements on the page. styleSheets[0] refers to the first style sheet element.
The addRule() method is used to insert rules into the style sheet object. The first parameter is the selector, and the second parameter is the definition of the selector.

6. The !important attribute of the style sheet
Any style with the !important attribute has priority in the page. Example:
p {color:red!important}

The text here is red.


Okay, the sentence at the beginning includes these knowledge points. Do you have any further innovations based on this for me to learn from? Encourage innovation. :)