In-depth understanding of scripted CSS series fifth-dynamic styles

Previous words

Most of the time, DOM operations are straightforward, so it is not cumbersome to generate content that is normally generated from HTML code with Javascript. But because browsers are riddled with hidden traps and incompatibilities, it's more complicated to deal with parts of the dom, such as dynamic styles that are relatively complex

A dynamic style is a style that does not exist when the page is loaded and is dynamically added to the page after the page is Loaded.

Dynamic styles include two Situations: one is to insert an external style sheet through the <link> element, and the other is to insert an inner style through the <style> Element. These two scenarios are described in more detail below

External styles

/* style.css inside the content */ . Box{height:100px;width:100px;background-color:pink;}

var link = document.createelement ("link"= "stylesheet"= "text/css"= "style.css" ; var head = document.getElementsByTagName (' head ') [0];head.appendchild (link);

Use the functions to encapsulate the following:

<div class= "box" > Test text </div><button id= "btn" > Dynamic Add Style </button><script>functionloadstyles (url) {loadstyles.mark= ' Load '; varlink = document.createelement ("link"); Link.rel= "stylesheet"; Link.type= "text/css"; Link.href=url; varHead = document.getElementsByTagName (' head ') [0]; Head.appendchild (link); }btn.onclick=function(){    if(loadstyles.mark! = ' Load ') {loadstyles ("style.css"); }}</script>

Internal style

var style = document.createelement ("style"= "text/css"= ". box{height:100px;width:100px; background-color:pink;} " ; var head = document.getElementsByTagName (' head ') [0

Use the functions to encapsulate the following:

<div class= "box" > Test text </div><button id= "btn" > Dynamic Add Style </button><script>functionloadstyles (str) {loadstyles.mark= ' Load '; varstyle = Document.createelement ("style"); Style.type= "text/css"; Style.innerhtml=str; varHead = document.getElementsByTagName (' head ') [0]; Head.appendchild (style); }btn.onclick=function(){    if(loadstyles.mark! = ' Load ') {loadstyles (". box{height:100px;width:100px;background-color:pink;}"); }}</script>

[note] This method errors in the Ie8-browser because the Ie8-browser treats <style> as a special node, does not allow access to its child nodes, or sets the innerHTML property

Compatible

IE browser supports accessing and modifying the Csstext property of an element's cssstylesheet object, enabling similar effects by modifying this property

<div class= "box" > Test text </div><button id= "btn" > Dynamic Add Style </button><script>functionloadstyles (str) {loadstyles.mark= ' Load '; varstyle = Document.createelement ("style"); Style.type= "text/css"; Try{style.innerhtml=str; }Catch(ex) {style.styleSheet.cssText=str; }    varHead = document.getElementsByTagName (' head ') [0]; Head.appendchild (style); }btn.onclick=function(){    if(loadstyles.mark! = ' Load ') {loadstyles (". box{height:100px;width:100px;background-color:pink;}"); }}</script>

In-depth understanding of scripted CSS series fifth-dynamic styles