1, to achieve site skins, usually the first thought is to use global class style control switch
Cons: global control CSS, in the case of small projects, small peels style of circumstances, can barely enough. But many peels style, then
the code will be very bloated, is not conducive to maintenance.
2, the introduction of switching CSS style href attribute value, the switching pattern to achieve the purpose.
<link id="skin" rel="stylesheet" href="./skin/skin.css">
document.querySelector('#skin').href = ""
Disadvantages: use JS to change the href attribute will bring loading delays, not smooth style switch drawbacks.
3, is achieved by replacing property values skinning CSS files skinning style JS.
Style and more bloated code words, style is not smooth handover
Disadvantage: IE poor compatibility
4, when the MDN read CSS found rel attribute of the link tag has an attribute value can be realized alternate loading of the CSS.
4.1, no title attribute, rel attribute value is only stylesheet <link> element will be loaded by default and rendering
4.2, have a title attribute, rel attribute value is only stylesheet <link> element as the default style CSS files loaded and rendered, such as: theme- default.css
4.3, has a title attribute, rel attribute value of alternate stylesheet contains <link> as an alternative style, CSS files are loaded but not the default rendering. Such as: theme-wsjd.css
alternate is a very interesting feature, we can control by JS whether the CSS rendering, using JavaScript to modify <link>
element in the DOM object is disabled is false, you can not make the default CSS rendering start rendering, rendering is not set to true.