Home > Developer > Web Develop
IE6 cannot document.createelement (' style ') and then append into the head tag. So I found such a good article.
---------------------
There are many ways to create a style node dynamically, but most are limited to external CSS files. How can I dynamically create a style node using a program-generated string that I've been doing for 2 hours.
static external CSS file syntax:
@import URL (style.css);
Dynamic external CSS files are loaded in the following ways:
The first type:
var style = document.createelement (' link ');
Style.href = ' style.css ';
Style.rel = ' stylesheet ';
Style.type = ' text/css ';
document.getElementsByTagName (' HEAD '). Item (0). appendchild (style);
The second type is simple:
Document.createstylesheet (STYLE.CSS);
A dynamic style node that uses a program-generated string:
var style = document.createelement (' style ');
Style.type = ' text/css ';
Style.innerhtml= "body{Background-color:blue;}";
document.getElementsByTagName (' HEAD '). Item (0). appendchild (style);
Unfortunately, the above code is successful in FF, but IE does not support it. Get the code from the Foreigner forum:
var sheet = Document.createstylesheet ();
Sheet.addrule (' body ', ' background-color:red ');
Success, but very troublesome, to take the string apart, a long write dead, tired like a dog.
Keep searching, find the code on a blog that doesn't know what language the country is in:
Document.createstylesheet ("javascript: ' Body{background-color:blue; '");
Success, this person is really bad, but the problem comes out, the URL maximum 255 characters, a little longer will not, change:
Window.style= "Body{background-color:blue;";
Document.createstylesheet ("Javascript:style");
Perfect solution!! Code:
<script>
function Blue () {
if (document.all) {
Window.style= "body{";
Document.createstylesheet ("Javascript:style");
}else{
var style = document.createelement (' style ');
Style.type = ' text/css ';
Style.innerhtml= "body{Background-color:blue}";
document.getElementsByTagName (' HEAD '). Item (0). appendchild (style);
}
}
</script>
<body>
<input type= "button" value= "Blue" onclick= "Blue ();" />
</body>
Original http://www.cnblogs.com/stephenykk/archive/2013/06/10/3131231.html
JS Dynamic Create style node (JS file to add CSS)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
