Invincible Bo PI Qian Kun big color-next article: script explanation

Invincible Bo PI Qian Kun big color-Previous Article: Usage
Invincible Bo PI Qian Kun big color-Article: style description
Invincible Bo PI Qian Kun big color-next article: script explanation
Invincible Bo PI Qian Kun big color-support: Subsequent Updates <Check for updates or raise questions here

If you have not downloaded the script file when reading [previous article: usage], download it now.CodeFor more information, see this document.ArticleSorry for the inconvenience. File: http://files.cnblogs.com/dingxue/css1_script.js

The stylelist In the first line of the script defines all the information of the seven styles used here. The three types of information are represented in sequence: style code, style color, and file address. The style code is used to differentiate different styles. You can use this code below to enable and disable the corresponding CSS file. The style color is the color of the small Color Block displayed in the switch area on the page, here, the background color of each style is used as the style color. The file address is the address of the CSS file corresponding to this style. If another CSS file is saved to another place, you only need to modify it here.

The Style File is introduced to

"Add the initialization process to window. onload, this part is used to make the page load automatically execute some operations, this is a piece of code from "Baidu", avoiding the window with the blog garden system. the onload conflicts, and these lines of code are a bit interesting.

Next is the "initialization" part. It mainly creates the switching area and the small color blocks in it and places them in the appropriate positions. After several attempts to directly perform string operations on switcher. innerhtml, they failed. Instead, we had to introduce a string variable. I don't know where the error was, or the browser is so strange. The insert position of this switch area is the current page, above sidebarmain, that is, at the top of the sidebar. If you want to modify the position or change the position, you can modify it here, and modify the corresponding CSS file. At the end of this Code, a regular expression is used to obtain the style that has been saved to the cookie. if the user has selected the style and the cookie is still valid, it will automatically switch to the previous one, if you have not selected the default gray style, you can change it to another style. However, we recommend that you use the default gray style, in this way, the "pop-up screen" during the first loading can be avoided ". There is actually a problem here. This operation is only performed after the page is loaded. The "pop-up screen" cannot be avoided. I don't know who has a better idea. I am looking forward to a reply. Thank you for your support.

The last is "style switching". Get all <link> first, and enable the specified CSS in the first for loop to disable other CSS. To maintain uniformity, here, the default style is declared to the style list above, so this for loop does not disable the built-in style, that is, the id = "maincss, the "style code" defined above is also used in this for. The title attribute introduced in the style file is used here. After the enable/disable state of the file is set, the initial size of all the small color blocks (8x8 in this example) is restored in the second for loop ), then, the selected style color block becomes larger to highlight the current selection. Finally, save the user's selection to the cookie for automatic loading on other pages or the next visit. The cookie can be set to 30 days, which should be large enough.

Conclusion:

The code is not well written, CSS is not perfect, and the color scheme is not to mention. I have no confidence in it, but it still takes more than one day to write it out intermittently, I hope it will help you. The code is not advanced, and the idea may be useful for reference. At the same time, you are welcome to continue to improve this function and make better styles.

Thank you for checking that the article is over. If you have any questions, please comment below. Thank you!