Undrar hur man via javascript kommer åt ett elements css värde så som det är satt i css filen, inte det renderade värdet.
I nedan kod vill jag alltså för #span kunna få fram 167% och inte 22px.
Testat via window.getComputedStyle men den ger ju oxå 22px, kan ju gå via document.styleSheets[0] men tycker den är väldigt omständig.
Jag har själv funderat på det där förut så jag sate mig ner och kikade på det. Kom fram med detta:
function getCSSRule(id, selectorText, jsStyleProperty){
var styleSheetElem = (typeof id=='string') ? document.getElementById(id) : id;
var styleSheet = styleSheetElem.sheet || styleSheetElem.styleSheet || styleSheet;
var rules = styleSheet.cssRules || styleSheet.rules;
for (var i=0; i<rules.length; i++){
if(rules[i].selectorText.toLowerCase() == selectorText.toLowerCase() && rules[i].style[jsStyleProperty] != '')
return rules[i].style[jsStyleProperty];
}
return null;
}
...
alert(getCSSRule('mystyle', '#span', 'fontSize'));
Kan t ex anropas som ovan och ger då tillbaka 167%. Testad och funkar i Opera 9.5, FF3 och IE6. Dock otestad på Safari och Chrome, och det är inte helt omöjligt att koden inte funkar där.
Notera att egenskaper måste skriva i Javascript-notation, t ex fontSize som ovan eller backgroundColor. (Istället för font-size eller background-color)
Returnerar null om ingen egenskap hittas, annars returneras den första matchande regeln. (Man kanske borde söka igenom reglerna baklänges?) Dessutom söks bara en style-tagg igenom, som måste specificeras till funktionen, t ex genom att ge den ett id som du skickar med.
Problemet är ju att man är bunden till att veta den precisa css regeln elementet har i css filen tex, "#div #p #span" och då "div #span" inte fungerar.
Istället för att kunna jobba direkt utifrån elementet, tex som inline: element.style.fontSize.
Så det är ju en fungerande lösning, men begränsad.
Skall försöka sätta mig in och fråga runt lite mer, och postar om jag hittar något. Gör detsamma vetja. :)
#div #p #span betyder ju "Ett element med id="span" inuti ett element med id="p" inuti ett element med id="span"". I det fallet, hur vill du att sökningen ska ske? Ska en sökning efter #div #span matcha #div #p #span eftersom båda anger ett #span någonstans inom #div. Det känns lite rörigt.
Däremot om du anger samma regel för flera element med komma-separering så har du en poäng. IE tolkar detta som två olika regler, däremot tolkar FF och Opera det som en regel med en selector som typ "#a, #b". Detta går förstås också att lösa.
function getCSSRule(id, selectorText, jsStyleProperty){
var styleSheetElem = (typeof id=='string') ? document.getElementById(id) : id;
var styleSheet = styleSheetElem.sheet || styleSheetElem.styleSheet || styleSheet;
var rules = styleSheet.cssRules || styleSheet.rules;
for (var i=0; i<rules.length; i++){
var selectors = rules[i].selectorText.split(/, */g);
for (var j=0; j<selectors.length; j++){
if(selectors[j].toLowerCase() == selectorText.toLowerCase() && rules[i].style[jsStyleProperty] != '')
return rules[i].style[jsStyleProperty];
}
}
return null;
}
om man söker efter antingen #span eller #div #p #span.
För övrigt, om du berättar vad du faktiskt vill åstadkomma kan jag försöka hjälpa dig bättre. Det du vill göra kanske går att göra helt utan att rota i CSS-filerna t ex...
Läste igenom mitt första inlägg och det är lite missvisande ser jag, så här är i alla fall upplägget.
Det jag försöker göra är att med ett antal element ta fram dess fontSize värde som det är satt i %. I .css filen har då body 13px och alla andra har 100% som default. Sen finns det ju olika cssRules.
I nedan script så skall alltså den första p ge 100% och den andra 167% och den tredje oxå 167% då den ärver från #p.
//Bara exempel
var ptags=document.getElementsByTagName("p");
for (i=0; i< ptags.length; i++){
var size1 = ptags[i].style.fontSize;//Bad
//Do something
}
Aha... Ge tusan i att lägga p inuti p. Standarden tillåter bara inline-element inuti <p>, och <p> är i sig ett sk block-element. Vill du modifiera text inuti <p>, använd <span>.
Och kolla lite på vad CSS-klasser och rekursive regler kan göra för dig.
CSS-id'n ska du använda för regler för element som det bara finns ett av. Sådana regler definieras av # följt av id't, t ex
#logo {width: 100px; height 50px;}
CSS-klasser ska du använda för regler som ska appliceras på vissa element. Sådana regler definieras av . följt av klass-namnet. T ex
.focused {font-size: 1.4em; }
Regler kan även appliceras skoningslöst på alla taggar av en viss typ. T ex
div {border-top: 1px solid black; }
Man kan även kombinera tagg-namn och klass-namn för att applicera en regel på ett element bara om elementet har både rätt tagg och klass:
span.remark {background-color: #300; }
(Ger alla span med class="remark" en mörkröd ton, men låter t ex p med class="remark" vara.)
Regler kan appliceras rekursivt. Genom att placera identifierarna efter varandra, separerade med mellanslag, t ex:
a img{border: none;}
är ett betydligt enklare sätt att få bort ramar runt bilder som ligger i a-taggar, än att skriva border="0" i alla img-taggar.
Med hjälp av två regler kan du särskilja bilder som beroende på typ av länk. T ex:
Dessa ger generellt bilder en enpixelsram och padding på två pixlar innanför ramen. Utom bilder som liggar i länkar med class="menulink", som förskonas de reglerna.
<p>Lalala lalala</p>
<p class="style1"><span class="focused">Jag</span> är standardfärg, 1.4x större och fet.</p>
<div class="style1"><span class="focused">Jag</span> är bara 1.4x så stor.</div>
<p class="style2"><span class="focused">Jag</span> är mörkröd, 1.4x större och kursiv.</p>
<div class="style2"><span class="focused">Jag</span> är också mörkröd, 1.4x större och kursiv.</p>
/* Regel för alla element med class="focused" */
.focused {font-size: 1.4em; }
/* Regel för alla element med class="focused" som ligger i just ett p-element som har class="style1" */
p.style1 .focused {font-weight:bold;}
/* Regel för alla element med class="focused" som ligger i valfritt element med class="style2" */
.style2 .focused {font-style:italic; color: #700;}
