tag:forum.selfhtml.org,2005:/self Wie font-size eines div deklariert in css-Datei auslesen? – SELFHTML-Forum 2006-03-21T10:25:53Z https://forum.selfhtml.org/self/2006/mar/20/wie-font-size-eines-div-deklariert-in-css-datei-auslesen/948183#m948183 Dieter dh@stefanie.de 2006-03-20T15:09:41Z 2006-03-20T15:09:41Z Wie font-size eines div deklariert in css-Datei auslesen? <p>Hallo!</p> <p>Wie bekomme ich z.B. font-size und fonz-family -Werte, die in einer css-Datei deklariert wurden?</p> <p>Im css z.B.<br> div.einedivklasse { font-size:25px; font-family:"Times New Roman" }</p> <p>Im html-Code sieht das div so aus<br> <div class="einedivklasse" id="meindiv">Text</div></p> <p>Wie lautet denn nun der Javascript-Code???</p> <p>Ich kriege es nicht raus. WEDER mit getAttribute noch mit .style.fontsize oder fontfamily funktioniert es!!!<br> Z.B.<br> alert("document.getElementById("meindiv").getAttribute("font-size");<br> alert("document.getElementById("meindiv").style.fontsize;</p> <p>Ist das etwa ein Firefox-Fehler? Ich habe Firefox 1.5.</p> <p>MfG<br> Dieter</p> https://forum.selfhtml.org/self/2006/mar/20/wie-font-size-eines-div-deklariert-in-css-datei-auslesen/948184#m948184 molily molily@gmx.de http://molily.de/ 2006-03-20T15:29:26Z 2006-03-20T15:29:26Z Wie font-size eines div deklariert in css-Datei auslesen? <p>Hallo,</p> <p>Über .style.eigenschaft kannst du nur CSS-Eigenschaftswerte auslesen, die über Inline-Styles (<element style="color:red">) gesetzt wurden bzw. eben auf diese Weise mittels JavaScript.</p> <p>Wenn du den tatsächliche Wert auslesen willst, den ein Element hat, nachdem alle ausgelagerten Style-Regeln angewendet wurden, so musst du den sogenannten »computed value« abfragen. Gemäß dem <a href="http://www.w3.org/TR/DOM-Level-2-Style/" rel="nofollow noopener noreferrer">DOM-Style-Standard</a> geht das folgendermaßen:</p> <pre><code class="block language-javascript"> <span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"meindiv"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> styledeclaration <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> eigenschaftswert <span class="token operator">=</span> styledeclaration<span class="token punctuation">.</span><span class="token function">getPropertyValue</span><span class="token punctuation">(</span><span class="token string">"font-size"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">alert</span><span class="token punctuation">(</span>eigenschaftswert<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Das funktioniert in Firefox, Opera, Konqueror und soweit ich weiß Safari.</p> <p>Der MSIE implementiert diesen Teil des Standards nicht, kennt aber das Objekt <a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/currentstyle.asp" rel="nofollow noopener noreferrer">currentStyle</a>, was eine ähnliche Funktionalität bietet.</p> <pre><code class="block language-javascript"> <span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"meindiv"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> eigenschaftswert <span class="token operator">=</span> element<span class="token punctuation">.</span>currentStyle<span class="token punctuation">.</span>fontSize<span class="token punctuation">;</span> <span class="token function">alert</span><span class="token punctuation">(</span>eigenschaftswert<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Zusammen mit einer Cross-Browser-Objekterkennung:</p> <pre><code class="block language-javascript"> <span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"meindiv"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> eigenschaftswert<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>getComputedStyle<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> styledeclaration <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> eigenschaftswert <span class="token operator">=</span> styledeclaration<span class="token punctuation">.</span><span class="token function">getPropertyValue</span><span class="token punctuation">(</span><span class="token string">"font-size"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>currentStyle<span class="token punctuation">)</span> <span class="token punctuation">{</span> eigenschaftswert <span class="token operator">=</span> element<span class="token punctuation">.</span>currentStyle<span class="token punctuation">.</span>fontSize<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">alert</span><span class="token punctuation">(</span>eigenschaftswert<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Im Forumsarchiv wirst du dazu einiges finden, etwa eine <a href="http://forum.de.selfhtml.org/archiv/2005/11/t117921/#m755753" rel="nofollow noopener noreferrer">allgemeinere Funktion</a>.</p> <p>Mathias</p> <div class="signature">-- <br> <a href="http://community.de.selfhtml.org/visitenkarten/view.php?key=17" rel="nofollow noopener noreferrer">Visitenkarte</a> · <a href="http://aktuell.de.selfhtml.org/weblog/" rel="nofollow noopener noreferrer">SELFHTML Weblog</a> </div> https://forum.selfhtml.org/self/2006/mar/20/wie-font-size-eines-div-deklariert-in-css-datei-auslesen/948185#m948185 Dieter dh@stefanie.de 2006-03-20T15:53:38Z 2006-03-20T15:53:38Z Wie font-size eines div deklariert in css-Datei auslesen? <p>Hallo!</p> <p>Vielen Dank!</p> <p>Schade, dass das nicht in selfhtml selbst steht.<br> Ist schon bekannt, ob noch ein update kommt?<br> Mir ist schon klar, dass es immer schwieriger wird, selfhtml kostenloas und aktuell zu halten.</p> <p>Grüße<br> Dieter</p> https://forum.selfhtml.org/self/2006/mar/20/wie-font-size-eines-div-deklariert-in-css-datei-auslesen/948186#m948186 Cybaer cybaer@binon.net http://Coding.binon.net 2006-03-21T10:25:53Z 2006-03-21T10:25:53Z Wie font-size eines div deklariert in css-Datei auslesen? <p>Hi,</p> <blockquote> <p>Schade, dass das nicht in selfhtml selbst steht.</p> </blockquote> <p>Es heißt halt self*HTML* und nicht selfJavaScript! Bezügl. JS ist selfHTML haarsträubend veraltet und unvollständig. Und ja: Das finde ich auch schade.</p> <p>Gruß, Cybaer</p> <div class="signature">-- <br> Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! </div>