Menu
I can't figure out where I'm going wrong here :/. When I run this code, all I get is a blank element. I can't seem to get the insertRule method to do anything (not even produce an error). Am I missing something?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<script>
var sheet = (function() {
// Create the <style> tag
var style = document.createElement("style");
// WebKit hack
style.appendChild(document.createTextNode(""));
// Add the <style> element to the page
document.head.appendChild(style);
return style.sheet;
})();
sheet.insertRule("\
#gridContainer {\
width: 100%;\
height: 100%;\
}\
", 0);
</script>
</body>
</html>
225
It is slightly confusing but your code does actually work, it is just that you can't see the inserted rules in the XML tree returned.
To verify that your code works, there are two tests you can do:
var style = (function() {
// Create the <style> tag
var style = document.createElement("style");
// WebKit hack
style.appendChild(document.createTextNode(""));
// Add the <style> element to the page
document.head.appendChild(style);
console.log(style.sheet.cssRules); // length is 0, and no rules
return style;
})();
style.sheet.insertRule('.foo{color:red;}', 0);
console.log(style.sheet.cssRules); // length is 1, rule added<p class="foo">
I am some text
</p>Run the above snippet, and you can see that the CSS rule does apply. And the cssRules property changes as well in the console.
This is often noted when browser extensions generate custom style-sheets appended to the DOM, and while debugging they appear as empty style-sheets in the inspector.
125
This version is based on Awal's answer and Totally Pwn CSS with Javascript from web archive. The id parameter is useful for accesing the styleSheet with getElementById, and the media parameter is optinal and defauts to 'screen'. I am returning the styleSheet.sheet, this is just my preference.
function createStyleSheet (id, media) {
var el = document.createElement('style');
// WebKit hack
el.appendChild(document.createTextNode(''));
el.type = 'text/css';
el.rel = 'stylesheet';
el.media = media || 'screen';
el.id = id;
document.head.appendChild(el);
return el.sheet;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
