[JS] Uitlezen complete stylesheet met actuele inhoud

[Neman]

Een stylesheet is embedded opgenomen in de HTML. Gebruikmakende van Prototype worden vervolgens diverse stijlen aangepast middels:

code:

$('div1').style.background = color;

Vervolgens doe ik een poging om de complete stylesheet uit te lezen:

code:

if (document.styleSheets)
        for (sheetKey in document.styleSheets)
            if (document.styleSheets[sheetKey]['title'] == 'stylesheet1')
            {
                var rules = '';
                
                for (ruleKey in document.styleSheets[sheetKey].cssRules)
                {
                    if (document.styleSheets[sheetKey].cssRules[ruleKey].cssText != undefined)
                        rules += document.styleSheets[sheetKey].cssRules[ruleKey].cssText+'\r\n';
                }
            
                alert(rules);
                break;
            }

Dit levert klaarblijkelijk de initiële stylesheet op, waar de veranderingen niet in zijn doorgevoerd. Deze site beschrijft het probleem:

If you use the former method to read the style properties for H1, but have declared them inline as in the latter example, you get the wrong values—those defined in the embedded stylesheet, not those defined in the inline style attribute. ...

There is a standard way to read the current style properties for any element, the getComputedStyle() method, but it is not yet supported on the Macintosh platform.

getComputedStyle moet worden aangeroepen op een specifiek element, ik heb zodoende wat problemen om de complete stylesheet uit te lezen. Heeft iemand tips?

[crisp]

Je stylesheet bevat inderdaad geen inline styles, maar wat probeer je precies te bereiken?

[Neman]

Ik laad een stylesheet met standaardkleuren, pas vervolgens realtime kleuren van veel elementen aan en het eindresultaat wil ik vervolgens wegschrijven als complete stylesheet.

[crisp]

En wat voor selector zou er dan voor die elementen 'gegenereerd' moeten worden?

[Neman]

Ik denk dat ik al een oplossing heb, namelijk het aanpassen van de betreffende styles in de stylesheet i.p.v. inline te werk te gaan. Ik heb de volgende functie geschreven:

code:

function changeStyle(elm, prop, value)
{
    if (document.styleSheets)
        for (sheetKey in document.styleSheets)
            if (document.styleSheets[sheetKey]['title'] == 'stylesheet1')
            {
                for (ruleKey in document.styleSheets[sheetKey].cssRules)
                {
                    if (document.styleSheets[sheetKey].cssRules[ruleKey]['selectorText'] == elm)
                    {
                        document.styleSheets[sheetKey].cssRules[ruleKey].style[prop] = value;
                        break;
                    }
                }
            }
}

Om dan terug te komen op het voorbeeld uit mijn startpost, dat zou het volgende worden:

code:

changeStyle('#div1', 'background', color);

Vervolgens kan ik gewoon de stylesheet uitlezen met de functie zoals vermeld in de startpost .

[crisp]

En als er nou bijvoorbeeld dit in je stylesheet staat:

Cascading Stylesheet:

p#div1 {
    background-color: red;
}

of een uitgebreidere selector, of meerdere selectors die hetzelfde element zouden kunnen targetten. Kortom: hoe weet je zeker dat de rule die je zoekt ook letterlijk zo bestaat, en met letterlijk die property?

Nog afgezien van de problemen die je krijgt om eea crossbrowser-compatible te krijgen (cssRules bestaat niet in IE, daar heet de rules-collection 'rules') vraag ik me af waarom je de basis stylesheet niet gewoon de basis stylesheet laat en geen gebruik maakt van de cascading eigenschap van CSS en aan de hand van de gemaakte keuzes gewoon extra stylerules genereert?

[ Voor 4% gewijzigd door crisp op 06-05-2009 22:26 ]

[Clay]

If you use the former method to read the style properties for H1, but have declared them inline as in the latter example, you get the wrong values—those defined in the embedded stylesheet, not those defined in the inline style attribute. ...

There is a standard way to read the current style properties for any element, the getComputedStyle() method, but it is not yet supported on the Macintosh platform.

Dat slaat op het met javascript opvragen van element.style.[property], niet op het uitlezen van css uit de stylesheets die aan de pagina hangen.

Maar waarom wil je styles in je stylesheets toevoegen? Als je met prototype kleuren aanpast, en ergens anders bv wil opvragen wat voor kleur iets nou heeft gekregen, dan heb je dat namelijk helemaal niet nodig.

[Bosmonster]

Lijkt me ook een aardig beveiligings risico als je er maar domweg vanuit gaat dat de stylesheet die je uitleest door jouw code is gegenereerd. Want ik kan die complete stylesheet omzeephelpen vanuit de console bijvoorbeeld.

[Neman]

Het is puur voor eigen gebruik en het is voldoende als het enkel onder Mozilla werkt, vandaar dat er weinig aandacht is besteed aan veiligheidsrisico's en browsercompatibiliteit. Het is naar mijn idee een handige methode om aan de hand van een basisstylesheet met kleuren te spelen en vanuit daar een nieuwe stylesheet te genereren...

[Sebazzz]

Wat is er anders mis met Web Developer Toolbar of Firebug? In het CSS tab van Firebug kan je lekker experimenteren, en naderhand doe je Ctrl-A Ctrl-C en je hebt je stylesheet.

[ Voor 48% gewijzigd door Sebazzz op 07-05-2009 19:31 ]