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

You can paste the following statement into the address bar and 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 an explanation:

1. javascript: url
Pseudo url technology. It applies to all tags including the href and src attributes. If an attribute can receive a url as its value, it can receive this javascript: url, and the address bar is equivalent to location. href, so it is no exception. :)

2. Return Value
Most js statements return values. Here we do not need to return values, so that they are not passed to the href attribute to make location. href take effect.
You can use alert, which does not produce the return value, but will calculate the expression method to achieve our goal: Use the statement as the alert parameter and execute it by alert.
However, alert will pop up the final result of the calculation (that is, the return value of the statement segment). We do not need a pop-up box, but only need to quietly execute the statement without returning the value. The void operator is exactly what we need.

3. Return Value again
In the statement segment of sequential execution, if each sentence has a return value, and a certain attribute (such as href) can only receive one return value, which return value does it receive? The answer is the last one. Therefore, we only need to add the void in the last sentence.

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

5. Add Rules for the defined style sheet
Document. styleSheets [0]. addRule ("TD", "border: 1 solid black ")
The preceding statement adds a rule to the first style table object on the page: put a black solid-line border with a pixel width on all table cells.
StyleSheets is a collection of all <style> </style> and <link rel = stylesheet type = text/css href = ***. css> elements on the page. StyleSheets [0] indicates the first style table element.
The addRule () method is used to insert rules for style sheet objects. The first parameter is selector, and the second parameter is the definition of selector.

6. style sheet! Important attributes
All have! The style of the important attribute, which has priority in the page. Example:
<Style>
P {color: red! Important}
</Style>
<P style = "color: green"> the text here is red. </P>

Well, the statement at the beginning includes these knowledge points. Are there any further innovations on this basis for me to learn? Encourage innovation. :)