1

ボード図が HTML と CSS を使用するボード ゲームの実装で、ボード上の男性に数字を適用するために CSS2.1 カウンターを使用しています。

.ply  {counter-increment:main;}
.move:before {content:counter(main);}

次のように構造化された HTML を使用

<ply>
  <move...>
  <ply>
    <move...>
  </ply>
</ply>

これはすべて正常に機能しますが、長さが 2 桁の場合は、条件付きでカウンター値のスタイルを変更したいと思います (letter-spacingたとえば、2 桁を負の値と一緒に圧縮します)。これを行う方法または回避策についてのアイデアはありますか?

4

4 に答える 4

2

getComputedStyle問題のカウンターの値は、カウンターがコンテンツとして指定された疑似要素を指定する 2 番目の引数を使用して取得できることがわかります。

value = window.getComputedStyle(elt, ':before').content;

次に、次のようなスタイルを適用できます

if (value>=100) { elt.style.letterSpacing = "-2px"; }

これは私たちが望んでいることですが、影響を受ける可能性のあるすべての要素を、変更された可能性があるときはいつでも JS でトラバースする必要があります。

于 2012-08-21T12:51:40.467 に答える