71

ここでテキストのフォントサイズを取得しようとしている質問を読んでいました。彼らが出した答えは、メジャー メソッドを使用してピクセル サイズを取得することでした。私ができるようにしたいのは、フォントサイズの値を取得して変更できるようにすることだけです。

例えば：

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

この例は機能しませんが、これら 2 つは機能します

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

唯一の問題は、サイズが一度しか変更されないことです。

4

7 に答える 7

191

style.fontSize要素の を取得するだけでは機能しない場合があります。font-sizeがスタイルシートで定義されている場合、これは""(空の文字列) を報告します。

window.getComputedStyleを使用する必要があります。

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';
于 2013-03-04T05:48:05.583 に答える
18

要素にfont-sizeプロパティがない場合、コードは空の文字列を返します。要素にfont-sizeプロパティが必要である必要はありません。要素は、親要素からプロパティを継承できます。

この場合、計算されたフォントサイズを見つける必要があります。これを試してください（IEについてはよくわかりません）

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

console.log(computedFontSize);

変数computedFontSizeは、フォントサイズと単位を返します。単位はpx、em、％です。算術演算を実行して新しい値を割り当てるには、単位を取り除く必要があります。

于 2013-03-04T05:53:44.623 に答える
4

Jquery を使用している場合は、以下が解決策です。

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

これがうまくいくことを願っています。

于 2013-03-04T05:48:50.263 に答える
2

fontSize から得られる値は "12px" または "1.5em" のようなものなので、その文字列に 1 を追加すると "12px1" または "1.5em1" になります。フォントサイズを取得して、次のように操作できます。

var fontSize = parseInt(x);
fontSize = fontSize + 1 + "px";
document.getElementById("foo").style.fontSize = fontSize;
于 2013-03-04T05:40:47.753 に答える
2
  1. html 要素にインライン スタイルがある場合は、 を使用してfont-size.style.fontSizeを取得できます。
  2. HTML 要素にインライン スタイルがない場合は、Window.getComputedStyle()関数を使用してfont-sizeを取得する必要があります。

ここに私のデモコードがあります!

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>

参照リンク:

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

于 2017-02-13T21:30:55.447 に答える
0

これを試してみると、フォントサイズを決定するのに間違いなく役立ちます

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 と setter を使用して、後でコードによってフォントサイズが変更されたかどうかを判断できます

于 2014-08-01T11:12:54.787 に答える