6

名前で CSS クラスにアクセスする必要があり、以下のコードが機能します。ただし、試してみるとhui["myclass"]、hui[".myclass"]代わりにhui[0]見つけることができません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
      .myclass {
        color: #00aa00;
      }
    </style>
    <script type="text/javascript">
        function change_class() {
          var hui = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
          hui[0].style["color"]="#ff0000"
        }
    </script>
  </head>
  <body>
    <div class="myclass" onclick="change_class()">Some Text</div>
  </body>
</html>

編集: 1行目で説明したように、ページ上の個々の要素にアクセスしたくないのですが、クラス名でスタイルシートに直接アクセスできるようにする必要があります。

それで、インデックスだけではクラス名でスタイルシートにアクセスできないと言っていますか？

4

6 に答える 6

7

いいえ、セレクターからアクセスすることはできません。これは単純なリストです。最初にそのインデックスを作成する必要がありました。

// assuming those are the right rules (ie from the right stylesheet)
var hui = document.styleSheets[0].rules || document.styleSheets[0].cssRules;

var styleBySelector = {};
for (var i=0; i<hui.length; i++)
    styleBySelector[hui[i].selectorText] = hui[i].style;

// now access the StyleDeclaration directly:
styleBySelector[".myclass"].color = "#ff0000";

もちろん、これは絶対確実な方法ではありません。

  • のような複数のセレクター.myClass, .myOtherClass
  • 1つのセレクターが複数回出現する（問題ではありませんが、最後の宣言はとにかく以前のスタイルを上書きします）

やみくもにcolorプロパティを割り当てるのではなく、最初に宣言の存在を確認する必要があります。

于 2012-10-22T22:34:47.190 に答える
0

確立されたルールを変更するには、これが1つのアプローチです。

// the [2] index is only because that's where JS Fiddle
// puts the user-entered CSS (from the CSS panel).
var sheets = document.styleSheets[2].rules,
    classString = 'body',
    props = ['color'], // requires a 1:1 relationship between two arrays...ugh
    to = ['#0f0'];

for (var i = 0, len = sheets.length; i < len; i++) {
    if (sheets[i].selectorText == classString) {
        for (var c = 0, leng = props.length; c < leng; c++) {
            sheets[i].style[props[c]] = to[c];
        }
    }
}​

JSフィドルデモ。

そして、わずかに改善された代替案（1：1の関係を必要とする2つの配列ではなくオブジェクト）：

var sheets = document.styleSheets[2].rules,
    classString = 'body',
    propsTo = {
        'color': '#0f0'
    };

for (var i = 0, len = sheets.length; i < len; i++) {
    if (sheets[i].selectorText == classString) {
        for (var prop in propsTo) {
            if (propsTo.hasOwnProperty(prop)) {
                sheets[i].style[prop] = propsTo[prop];
            }
        }
    }
}​

JSフィドルデモ。

于 2012-10-22T22:39:49.223 に答える
0 
document.getElementsByClassName('myclass');

一致する要素の配列を返します。

次の行に沿って何かを使用することもできます。

<body>
    <div id="changethese">
        <div class="myclass" onclick="change_class()">Some Text</div>
    </div>
    <div class="myclass">div two</div>
</body>

Javascript:

var changeTheseDivs = document.getElementById('changethese');
changeTheseDivs.getElementsByClassName('myclass')

選択した div 内のクラスのみを変更するには。

ただし、このメソッドのサポートは IE9 までしか機能しないため、JQuery がオプションである場合は、それを使用することをお勧めします。

編集：

読み間違えたと思いますが、要素の CSS を変更するのではなく、実際の CSS ルール自体を変更したいようです。理論的には、ルールを名前で検索し、そのプロパティを変更する関数を作成できます。私はそれが次のようになると思います（テストされていませんが、動作するはずです）：

function findAndChangeCSSRule(ruleName, newRule, newProperty){
    var mysheet=document.styleSheets[0];
    var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules
    for (i=0; i<myrules.length; i++){
        if(myrules[i].selectorText.toLowerCase()==ruleName){
             targetrule=myrules[i];
             break;
        }
    }
    targetrule.style[newRule.toString()]=newProperty;
}

次に、次のように呼び出します。

findAndChangeCSSRule('my_class', 'color', 'red')
于 2012-10-22T22:28:17.350 に答える
-1

(document.styleSheets[0].cssRules || document.styleSheets[0].rules)[0].style.color = '#ff0000' 動作するはずです。

Quirksmode CSSOM (DOM CSS) 互換表

于 2012-10-22T22:36:37.670 に答える