3

JavaScript を使用して CSS を操作したいと考えています。最初は、アコーディオン メニューのさまざまな色と、入力フィールドからのさまざまな background/title-/content-/... background-colors を試すための、すてきな小さなスクリプトであると考えられていました。

jsで入力値を取得する方法を理解しています。

getElementById()、getElementsByClassName()、getElementsByTag()、およびを使用して CSS を操作する方法を理解していgetElementsByName()ます。

さて、問題は、私の CSS が次のようになっていることです。

.accordion li > a {
  /* some css here */
}
.sub-menu li a {
/* some css here */
}
.some-class hover:a {
/* css */
}
.some-other-class > li > a.active {
/* css */
}

このようなスタイリングのプロパティを JavaScript で変更するにはどうすればよいですか?

4

3 に答える 3

3

一部の CSS スタイルを JavaScript で直接操作する方法はありません。代わりに、スタイルシート自体のルールを次のように変更できます。

var changeRule = function(selector, property, value) {
        var styles = document.styleSheets,
            n, sheet, rules, m, done = false;
        selector = selector.toLowerCase();
        for(n = 0; n < styles.length; n++) {
            sheet = styles[n];      
            rules = sheet.cssRules || sheet.rules;
            for(m = 0; m < rules.length; m++) {
                if (rules[m].selectorText.toLowerCase() === selector) {
                    done = true;
                    rules[m].style[property] = value;
                    break;
                }
            }
            if (done) {
                break;
            }
        }
    };
changeRule('div:hover', 'background', '#0f0');

selector既存のセレクターと正確に一致する必要があり、セレクター テキストと の間のスペースのみ{が無視されます。

セレクター名の部分的なヒットを見つけて変更するコードを開発したり、すべてではなく特定のスタイルシートをチェックしたりすることができます。そのままでは、数千のルールを含む数十のスタイルシートを使用すると、非常にコストがかかります。

残念ながら、このスニペットでは疑似要素を操作できません。

jsFiddleでのライブ デモ。

于 2013-07-03T17:26:02.040 に答える
1

すべての DOM 要素には、JavaScript で変更できるスタイル オブジェクトがあります。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style?redirectlocale=en-US&redirectslug=Web%2FAPI%2Felement.style

または、jQuery を使用している場合:

http://api.jquery.com/css/

要素をターゲットにしてそのプロパティを操作することはできますが、ルールは変更しません。

多数のスタイル プロパティを変更する場合の一般的な方法は、要素のクラス名を変更して外観を変更することです。これは、className プロパティを使用するか、jQuery を使用している場合はaddClassおよびremoveClassを使用して実行できます。

于 2013-07-03T16:08:06.567 に答える
0

下線付きのTeemuの回答を実装しました。http://jsfiddle.net/6pj3g/4/

var rule = _.chain(document.styleSheets)
    .map(function(sheet){return _.flatten(sheet.cssRules)})
    .flatten()
    .unique()
    .find(function(rule){ return rule && rule.selectorText && (rule.selectorText.toLowerCase() === selector.toLowerCase())})
    .value()

if (rule){
    rule.style[property] = value;
} else {
    throw 'selector not found: ' + selector;
}
于 2014-02-08T21:58:45.097 に答える