0

を使用しますgetComputedStyle(element)[type]。ここで、要素は<p>タグでtypeあり、またはのいずれfontSize, lineHeight, letterSpacing, fontFamilyかwidthです。fontSize と width については、16px や 100% などの数値を取得します。これは私が扱うことができるものですが、letterSpacing と lineHeight についてnormalは値として取得します。しかし、数値として必要なので、足したり引いたりできます。JSで操作したい。

私のスタイルシートでは、次のようになります。

:root {
  --font-size: 1rem;
  --line-height: inherit;
  --letter-spacing: 0rem;
  --font-type: inherit;
  --text-width: 100%;
}

すでに設定した値を使用して配列を手動で書き込み、それを操作するオプションがあります。しかし、それを継承しているため、lineHeight にはまだ問題があります。

次に例を示します。

const target = document.getElementById("target");
console.log(getComputedStyle(target)["lineHeight"]);
:root {
  --font-size: 1rem;
  --line-height: inherit;
  --letter-spacing: 0rem;
  --font-type: inherit;
  --text-width: 100%;
}
<p id="target"></p>

4

1 に答える 1

0

を取得した場合normal、それに相当する実際の数値を取得する方法はないと思います。

MDN は次のように述べています。

normal

ユーザーエージェントに依存します。デスクトップ ブラウザ (Firefox を含む) は1.2、要素のfont-family.

normalしたがって、 =>と仮定できますが1.2、信頼できる仮定ではありません。

具体的に何をしているのかによってはgetClientRects、段落の高さがわかるので便利です。そのコンテンツを保存して、次のように 1 文字だけを指定するとx(その後、測定後にコンテンツを復元します)、その段落の行のピクセル単位の高さがわかります。他のすべての条件は同じです。

const target = document.getElementById("target");
console.log(getComputedStyle(target)["lineHeight"]);
console.log(target.getClientRects()[0].height);
:root {
  --font-size: 1rem;
  --line-height: inherit;
  --letter-spacing: 0rem;
  --font-type: inherit;
  --text-width: 100%;
}
<p id="target">x</p>

ただし、それが役立つかどうかは、何をしているかによって異なります。

于 2021-01-02T10:44:37.410 に答える