tag:forum.selfhtml.org,2005:/selfWie font-size eines div deklariert in css-Datei auslesen? – SELFHTML-Forum2006-03-21T10:25:53Zhttps://forum.selfhtml.org/self/2006/mar/20/wie-font-size-eines-div-deklariert-in-css-datei-auslesen/948183#m948183Dieterdh@stefanie.de2006-03-20T15:09:41Z2006-03-20T15:09:41ZWie 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#m948184molilymolily@gmx.dehttp://molily.de/2006-03-20T15:29:26Z2006-03-20T15:29:26ZWie 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#m948185Dieterdh@stefanie.de2006-03-20T15:53:38Z2006-03-20T15:53:38ZWie 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#m948186Cybaercybaer@binon.nethttp://Coding.binon.net2006-03-21T10:25:53Z2006-03-21T10:25:53ZWie 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>