-1

良い一日。

javascript を使用して div にネストされたリスト項目にスタイルを適用できるかどうかを知りたいです。私のページには、リストアイテムを含む div が既にたくさんありますが、その特定のリストアイテムにスタイルを適用したいだけです。

javascrip を使用して listitem にスタイルを適用したい唯一の理由は、div 内で css スタイルを受け入れたくない IE 7 の表示上の問題があるためです。

私のHTMLは：

<ol>    
   <li>
      GENERAL PRINCIPLES UNDERLYING THE REPRESENTIVE COUNCIL OF LEARNERS
      <div id = "divv">
         <ol>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
         </ol>
      </div>
    </li>
<ol>

ありがとうございました

4

4 に答える 4

0

内部リストの CSS スタイルを示す JSFiddle を作成しました

http://jsfiddle.net/adrianjmartin/9V8tR

于 2012-05-02T11:27:07.997 に答える
0

必要なことは、ID を使用して div を取得し、そこから必要なリストに到達するまで DOM をトラバースすることだけです。次に、リスト スタイル オブジェクトを使用して、必要なスタイルを挿入します。

また、CSS からそれを行うことができない場合は、より多くの問題があると思われます。適切に構造化された CSS は常に適用できます (もちろんサポートされていない場合を除きます)。

これは、提供されたテスト マークアップを少し変更したものです。div を取得し、その中の OL を見つけて、境界線を追加します。

http://jsfiddle.net/Dj5gH/1/

var div = document.getElementById('divv'),
    found = false,
    elem = div.firstChild;

while (!found) {

    if (elem.nodeType == 1) {
        elem.style.border = '2px solid red';
        found = true;
    }
    else elem = elem.nextSibling;
};​
于 2012-05-02T11:21:10.070 に答える
0

もちろん、IE が常にサポートしてきたものであるため、IE7 でも動作するはずです。

#divv ol li{your style properties here}

すべてのブラウザで動作するはずです。これが機能しない唯一のシナリオは、css の別の場所で '!important' を使用して "ol li" スタイリングをキャンセルした場合です。

于 2012-05-02T11:11:06.627 に答える
0

はい、getElementById と getElementsByTagName の組み合わせを使用してこれを行うことができます。次に、見つかったアイテムに対してループを実行し、javascript を使用して css スタイルを追加します。ここで、同じことを jsfiddle で行います: http://jsfiddle.net/saganbyte/m65CF/1/

于 2012-05-02T11:12:10.797 に答える