--- title: "Få fram ett elements värde så som det är satt i css filen" type: "forum-thread" url: "https://www.webforum.nu/amne/javascript/179508-få-fram-ett-elements-värde-så-som-det-är-satt-i-css-filen" topic: "JavaScript" topic_url: "https://www.webforum.nu/amne/javascript" author: "Dino" published: "2009-07-24T17:29:28.000Z" updated: "2009-07-25T22:26:24.000Z" replies: 6 views: 691 page: 1 pages: 1 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/179508-få-fram-ett-elements-värde-så-som-det-är-satt-i-css-filen" --- # Få fram ett elements värde så som det är satt i css filen ## #1 — Dino, 2009-07-24T17:29Z 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. Så finns det något "riktigt" sätt? test.html ``` Test

Lalala lalala hmm lalala lalala

``` test.css ``` body{font-size:13px;} #p{font-size:100%;} #span{font-size:167%;color:green;} ``` Permalänk: https://www.webforum.nu/p/179508 ## #2 — nitro2k01, 2009-07-24T19:07Z 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 body{font-size:13px;} #p{font-size:100%;} #span{font-size:167%;color:green;} ``` Permalänk: https://www.webforum.nu/p/2193872 ## #3 — Dino, 2009-07-24T20:02Z Lösningen i sig fungerar bra, men då de flesta idag använder externa css filer framför style taggar så kan man istället använda, ``` ``` för att istället köra emot css filen. 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. :) Tack för svaret. Permalänk: https://www.webforum.nu/p/2193883 ## #4 — nitro2k01, 2009-07-24T20:35Z **\#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 #span,#div #p #span{font-size:167%;color:green;} ``` 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... Permalänk: https://www.webforum.nu/p/2193888 ## #5 — Dino, 2009-07-25T10:58Z 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. ``` Test

Lalala lalala

Lalala lalala

hmm

lalala lalala

``` ``` body{font-size:13px;} *{font-size:100%;} #p{font-size:167%;} ``` ``` //Bara exempel var ptags=document.getElementsByTagName("p"); for (i=0; i< ptags.length; i++){ var size1 = ptags[i].style.fontSize;//Bad //Do something } ``` Permalänk: https://www.webforum.nu/p/2193930 ## #6 — nitro2k01, 2009-07-25T11:56Z Aha... Ge tusan i att lägga p inuti p. Standarden tillåter bara inline-element inuti \, och \ är i sig ett sk block-element. Vill du modifiera text inuti \, använd \. 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: ``` a img{border: border: 1px solid black; padding: 2px;} a.menulink img{border: none; padding: 0px;} ``` 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. ```

Lalala lalala

Jag är standardfärg, 1.4x större och fet.

Jag är bara 1.4x så stor.

Jag är mörkröd, 1.4x större och kursiv.

Jag är också mörkröd, 1.4x större och kursiv.

``` ``` /* 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;} ``` Hoppas du har lärt dig något nytt om CSS. :) Permalänk: https://www.webforum.nu/p/2193932 ## #7 — Dino, 2009-07-25T22:26Z > **[nitro2k01 skrev:](https://www.webforum.nu/p/1474816)** > > Hoppas du har lärt dig något nytt om CSS. :) Tack, har visst en hel del att lära om [CSS](http://www.css.to/). Hur som helst så har saker och ting löst sig. Gjorde lite ändringar i tillvägagångssättet och... Permalänk: https://www.webforum.nu/p/2193984 --- Tråden på webben: https://www.webforum.nu/amne/javascript/179508-få-fram-ett-elements-värde-så-som-det-är-satt-i-css-filen