4

CSS 疑似クラスの「コンテンツ」内のテキストを適切な方法で動的に生成したいと考えています。これまでの例で、動作中の jsfiddleを埋めました。この図は、これを達成する方法をよりよく示しています。

私が達成したいことの例

これは関連するコードです（フィドルにもあります）：

[の一部] index.php:

<div class="checkbutton">
  <input type="checkbox" value="None" id="slideThree" name="check"/>
  <label for="slideThree"></label>
</div>

[の一部] style.css:

.checkbutton:before
  {
  content: 'Hombre';
  float: left;
  width: 60px;
  text-align: center;

  /* 28 es la altura total */
  font: 12px/28px Arial, sans-serif;
  color: CornflowerBlue;
  z-index: 0;
  font-weight: bold;
  }

そのコードを次の 2 つの目的で再利用できるようにしたいと考えています。

  1. PHPで動的かつ内部的に翻訳します。
  2. 同様のスタイルの異なるボタン。

つまり、似たようなボタンを別の名前で作成したり、追加のマークアップなしで翻訳したりできるようにしたいということです。これを適切に行う方法がわかりません。理由は次のとおりです。

どうすれば達成できますか？CSSを使用する必要があるのは奇妙だと思います

4

2 に答える 2

10

必要なコンテンツを属性として設定できる限り、attr()関数を使用してスタイルを抽象化できます。

http://tinker.io/bda2e

.checkbutton:before {
  content: attr(data-checked);
}

<div class="checkbutton" data-checked="Hombre" data-unchecked="Mujer">
  <input type="checkbox" value="None" id="slideThree" name="check"/>
  <label for="slideThree"></label>
</div>

の接頭辞が付いたカスタム属性は、data-HTML5 の一部です: data-* 属性を使用したカスタムの非表示データの埋め込み

于 2013-04-23T13:56:31.553 に答える
0

質問を書き、解決策を見つけるのにどれだけ苦労したかを書いた後、誰かが役に立つと思った場合に備えて投稿します。このフィドルと関連するコードは次のとおりです。

[の一部] index.php:

<div class="checkbutton">
  <input type="checkbox" value="None" id="slideThree" name="check" checked />
  <label for="slideThree"></label>
  <!-- Now this can be generated with PHP -->
  <span class = "leftcheck"><?= "Hombre"; ?></span>
  <span class = "rightcheck"><?= "Mujer"; ?></span>
</div>

[の一部] style.css:

.checkbutton .leftcheck
  {
  position: absolute;
  left: 0px;
   width: 50%;
  text-align: center;
  line-height: 28px;
  color: CornflowerBlue;
  }

もちろん、より良い方法があれば、回答として書いてください。

于 2013-04-23T13:10:55.283 に答える