thin, medium, thick ? wieviel pixel ?
mathefritz
- css
- javascript
wenn im style, u.A. border: 3px solid black
und border-left: dotted
steht
erhalte ich medium
bei Abfrage der border-left-width
statt der erwarteten 3 oder 3px .
wie ist das umzurechnen?
getBoundingClientRect
gibt ja width
und height
inclusive border zurück und wenn eine function
bezüglich der Box als Parameter nur die Referenz auf diese bekommt ( vernünftigerweise) und nur den Inhaltsbereich bearbeiten soll, braucht sie diese Umrechnung .
Gibt denn eigentlich getBoundingClientRect
immer für y
denselben Wert wie für top
, für x
immer denselben wie für left
zurück ?
@@mathefritz
wenn im style, u.A.
border: 3px solid black
undborder-left: dotted
stehterhalte ich
medium
bei Abfrage derborder-left-width
statt der erwarteten 3 oder 3px .
Ich nicht.
Sag bloß nicht, wie du die Abfrage machst, welchen Browser du verwendest, wo dein Beispiel online zu sehen ist … es könnte ja sein, dass jemand dein Problem nachvollziehen könnte.
Du bist doch nicht zum ersten Mal hier.
<!DOCTYPE HTML><html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
#B1 { border:3px solid black; display:inline-block;
border-left: dotted;}
</style>
</head>
<body>
A<br>B<br>C<br>D<br></div> <!--
<div id = "B1"> -->
<div id="B1" style="border:3px solid black; display:inline-block;
border-left: dotted;">
-->Text Text Text Text Text<br> Text Text Text
</div>
<script>
B1 = document.getElementById('B1');
console.log(B1.style['border-left-width']);
</script>
</body></html>
ok, Firefox zeigt 'medium', chrom zeigt 'initial' ;
peinlich ist mir daß im Stylesheet für id="B1" noch irgendein Fehler steck, mit dem ist die Ausgabe leer.
@@mathefritz
<div id="B1" style="border:3px solid black; display:inline-block; border-left: dotted;"> -->Text Text Text Text Text<br> Text Text Text </div> <script> B1 = document.getElementById('B1'); console.log(B1.style['border-left-width']); </script>
ok, Firefox zeigt 'medium', chrom zeigt 'initial' ;
AFAIS hat Firefox recht, weil medium
exakt der Wert ist, auf den du border-left-width
gesetzt hast. [MDN:border-left]
peinlich ist mir daß im Stylesheet für id="B1" noch irgendein Fehler steck, mit dem ist die Ausgabe leer.
Natürlich. Im style
-Objekt steht nur das, was du mit JavaScript dort reingeschrieben hast oder was in Inline-style
-Attributen angegeben ist. (Weder das eine noch das andere sollte man tun!)
Wenn du die aus dem Stylesheet berechneten Werte haben möchtest: window.getComputedStyle().getPropertyValue()
[MDN:getComputedStyle]
LLAP 🖖
Danke Gunnar,
Im WikiArtikel klappt es aber auch ohne getPropertyValue
aber offenbar nicht immer - wann also?
<!DOCTYPE HTML><html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
#B1 { border:3px solid black; display:inline-block;
border-left: dotted;
font: italic 1.5em Arial, sans-serif;
}
</style>
</head>
<body>
A<br>B<br>C<br>D<br>
<div id = "B1">
Text Text Text Text Text<br> Text Text Text
</div>
<script>
B1 = document.getElementById('B1');
sty = window.getComputedStyle(B1,null);
console.log(
'border-right-width: '+sty.getPropertyValue
('border-right-width')+"\n", // wird
' width: '+sty.width + "\n", // wird angezeigt
' font ohne: '+sty.font + "\n", // wird nicht
' font mit: '+sty.getPropertyValue('font') // wird nicht
)
</script>
</body></html>
Zu Anfang fragte ich auch:
Gibt denn eigentlich getBoundingClientRect immer für y denselben Wert wie für top, für x immer denselben wie für left zurück ?
@@mathefritz
Im WikiArtikel klappt es aber auch ohne
getPropertyValue
Ich kann jetzt auch keinen Unterschied zwischen CSSStyleDeclaration.getPropertyValue(propertyName)
und CSSStyleDeclaration[propertyName]
feststellen.
Ich vermute, getPropertyValue()
ist einfach ein API für CSSStyleDeclaration
und tut nichts weiter als:
CSSStyleDeclaration.prototype.getPropertyValue = function(propertyName)
{
return this[propertyName];
}
aber offenbar nicht immer - wann also?
Hm, Firefox liefert nur Werte für einfache Eigenschaften wie padding-left
, aber nichts für zusammengesetzte Eigenschaften wie padding
. Ich halte das für einen Bug.
LLAP 🖖