Geek asks and answers

Getting the prototype <style>, CSSStyleRule / CSSRule mess

I am in the middle of creating a Javascript framework for my work, supporting the most modern browsers (FF 4+, Chrome, Opera 11+, IE8 +). I am having problems extending prototypestyle rules (suppose this ruleis a style rule):

  • In Opera (v. 11.64 so far) there is no object CSSStyleRule, even if String(rule) === "[object CSSStyleRule]". It is still true that rule instanceof CSSRule, but CSSRule.prototypeis undefined. The only way to find out the correct prototype is rule.__proto__.
  • In other browsers (e.g. IE) I want to define a property parentStyleSheet. "parentStyleSheet" in CSSStyleRule.prototypeis always false, and I prefer not to override the built-in implementation, since soft-coded is not quite cheap (at least on first run).

Having a style rule sufficient to allow me to continue, but these two points are problems, since I am working on a framework that was defined before the document was loaded, so I cannot add <style>elements to the DOM.

So I ask:

  • Is there a way to create a dummy style rule (and, ultimately, its parent style sheet) without having to attach it to the DOM?
  • How to access prototype style rules in Opera?

I am afraid that the answer to the first question is no.

+3
1

, DOM

document.head, document.write('<link rel="stylesheet" .... AFAIK , document.head - , :

<script>
    (function(){
        var s='blueskin';
        var link=document.createElement('link');
        var h=document.getElementsByTagName('head')[0];
        link.type='text/css';
        link.rel='stylesheet';
        link.href='/skins/'+s+'.css';
        h&&h.appendChild(link);
    })();
</script>

css:

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.type = 'text/css';
link.href = 'http://example.com/stylesheet.css';
document.head.appendChild(link);

CSS , style ( , , , Opera, ):

var styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.rel = 'stylesheet';
setCss(styleElement, css);
document.head.appendChild(styleElement);

function setCss(styleElement, css) {
    if (styleElement.styleSheet) {   // IE
        styleElement.styleSheet.cssText = css || '';
    } else {
        var firstChild = styleElement.firstChild;
        firstChild && styleElement.removeChild(firstChild);
        var textnode = document.createTextNode(css || '');
        styleElement.appendChild(textnode);
    }
}

cssFx CSS <link rel="stylesheet" , - .

document.head, ( @import), .

, , onload jQuery $(myReadyFn); .

0

More articles:


All Articles