it-swarm.com.de

So erhalten Sie die Schriftgröße in HTML

Ich habe hier eine Frage gelesen und versucht, die Schriftgröße eines Textes zu ermitteln. Die Antwort bestand darin, die Pixelgröße mit einer Messmethode zu ermitteln. Alles, was ich tun möchte, ist den Schriftgrößenwert zu erhalten, damit ich ihn ändern kann.

Zum Beispiel:

var x = document.getElementById("foo").style.fontSize;
document.getElementById("foo").style.fontSize = x + 1;

Dieses Beispiel funktioniert nicht, obwohl diese beiden es tun

  1. document.getElementById("foo").style.fontSize = "larger";
  2. document.getElementById("foo").style.fontSize = "smaller";

Das einzige Problem ist, dass die Größe nur einmal geändert wird.

40
Mark Walsh

Nur den style.fontSize eines Elements zu packen, funktioniert möglicherweise nicht. Wenn font-size durch ein Stylesheet definiert ist, wird "" (leere Zeichenfolge) ausgegeben.

Sie sollten window.getComputedStyle verwenden.

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); 
// now you have a proper float for the font size (yes, it can be a float, not just an integer)
el.style.fontSize = (fontSize + 1) + 'px';
107
Paul Armstrong

Wenn Ihr Element keine Eigenschaft in Schriftgröße hat, gibt der Code eine leere Zeichenfolge zurück. Es ist nicht erforderlich, dass Ihr Element über die Eigenschaft "Schriftgröße" verfügt. Das Element kann die Eigenschaften von übergeordneten Elementen erben.

In diesem Fall müssen Sie die berechnete Schriftgröße ermitteln. Versuchen Sie dies (nicht sicher über den IE)

var computedFontSize = window.getComputedStyle(document.getElementById("foo")).fontSize;

console.log(computedFontSize);

Die Variable computedFontSize wird mit der Einheit für die Schriftgröße zurückgegeben. Es kann px, em,% sein. Sie müssen die Einheit entfernen, um eine arithmatische Operation auszuführen und den neuen Wert zuzuweisen.

4
kiranvj

Der Wert, den Sie von fontSize erhalten, ist etwa "12px" oder "1.5em". Wenn Sie dem String 1 hinzufügen, erhalten Sie "12px1" oder "1.5em1". Sie können die Schriftgröße nehmen und mit folgenden Einstellungen bearbeiten:

var fontSize = parseInt(x);
fontSize = fontSize + 1 + "px";
document.getElementById("foo").style.fontSize = fontSize;
2
MattDiamant

Wenn Sie Jquery verwenden, ist die Lösung die folgende.

var fontSize = $("#foo").css("fontSize");
fontSize  = parseInt(fontSize) + 1 + "px";
$("#foo").css("fontSize", fontSize );

Hoffe das wird funktionieren.

1
Umair Saleem
  1. wenn das html-Element einen Inline-Stil hat, können Sie den .style.fontSize verwenden, um die font-size zu erhalten!
  2. wenn das html-Element keinen Inline-Stil hat, müssen Sie die Funktion Window.getComputedStyle() verwenden, um die font-size zu erhalten!

hier sind meine Demo-Codes!

function tureFunc() {
    alert(document.getElementById("fp").style.fontSize);
    console.log(`fontSize = ${document.getElementById("fp").style.fontSize}`);
}
function falseFunc() {
    alert( false ? document.getElementById("fh").style.fontSize : "check the consloe!");
    console.log(`fontSize = ${document.getElementById("fh").style.fontSize}`);
}
function getTheStyle(){
    let elem = document.getElementById("elem-container");
    let fontSize = window.getComputedStyle(elem,null).getPropertyValue("font-size");
    // font-size !=== fontSize
    console.log(`fontSize = ${fontSize}`);
	   alert(fontSize);
    document.getElementById("output").innerHTML = fontSize;
}
// getTheStyle();
<p id="fp" style="font-size:120%">
    This is a paragraph.
    <mark>inline style : <code>style="font-size:120%"</code></mark>
</p>
<button type="button" onclick="tureFunc()">Return fontSize</button>
<h3 id="fh">
    This is a H3. <mark>browser defualt value</mark>
</h3>
<button type="button" onclick="falseFunc()">Not Return fontSize</button>
<div id="elem-container">
<mark>window.getComputedStyle & .getPropertyValue("font-size");</mark><br/>
<button type="button" onclick="getTheStyle()">Return font-size</button>
</div>
<div id="output"></div>

Verweislinks:

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

0
xgqfrms

Versuchen Sie dies, es würde Ihnen definitiv bei der Bestimmung der Schriftgröße helfen

var elem = document.createElement('div');
var t=document.createTextNode('M')
elem.appendChild(t);
document.body.appendChild(elem);

var myfontSize = getStyle(elem,"fontSize")
alert(myfontSize)
document.body.removeChild(elem);

function getStyle(elem,prop){
if (elem.currentStyle) {
var res= elem.currentStyle.margin;
} else if (window.getComputedStyle) {
if (window.getComputedStyle.getPropertyValue){
var res= window.getComputedStyle(elem, null).getPropertyValue(prop)}
else{var res =window.getComputedStyle(elem)[prop] };
}
return res;
}

getter und Setter können wir weiterhin verwenden, um zu bestimmen, ob die Schriftgröße später durch ein Stück Code geändert wird

0
Gaurav