web-dev-qa-db-ja.com

JavaScriptからCSS擬似クラスルールを設定する

JavaScriptから擬似クラスセレクター（：link、：hoverなど）のCSSルールを変更する方法を探しています。

CSSコードの類似物：a:hover { color: red } JSで。

私は他のどこにも答えを見つけることができませんでした。これがブラウザでサポートされていないことを誰かが知っている場合、それも有益な結果になります。

javascriptcsspseudo-class
117
user39882

インラインstyle = "..."属性で擬似クラスを使用できないのと同じように、セレクターがないため、特定の要素だけで擬似クラスをスタイルすることはできません。

スタイルルールを追加するなどして、スタイルシートを変更することでそれを行うことができます。

#elid:hover { background: red; }

影響を与える各要素に一意のIDがあり、選択できるようになっていると仮定します。

理論的には、必要なドキュメントは http://www.w3.org/TR/DOM-Level-2-Style/Overview.html です。つまり、既存の埋め込みまたはリンクを指定できますスタイルシート）のような構文を使用：

document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);
document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';

IEはもちろん独自の構文を必要とします：

document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);
document.styleSheets[0].rules[0].style.backgroundColor= 'red';

古いブラウザとマイナーなブラウザは、どちらの構文もサポートしない可能性があります。動的なスタイルシートをいじるのはめったに行われません。というのは、正しいことはめったになく、ほとんど必要なく、歴史的に面倒だからです。

181
bobince

私はJSでスタイルシートを操作するための有効なユースケースがあると思うので、 このための小さなライブラリ をまとめました。理由：

  • 計算または取得する必要があるスタイルの設定-たとえば、Cookieからユーザーの優先フォントサイズを設定します。
  • 特にUIウィジェット/プラグイン開発者向けに、動作（美的ではない）スタイルを設定します。タブ、カルーセルなどは、機能するために基本的なCSSを必要とすることがよくあります-コア機能のスタイルシートをdemandしてはいけません。
  • CSSルールは現在および将来のすべての要素に適用され、Firebug/Developer Toolsで表示するときにHTMLが乱雑にならないため、インラインスタイルよりも優れています。
29
David Tang

クロスブラウザのものに対処する関数：

addCssRule = function(/* string */ selector, /* string */ rule) {
  if (document.styleSheets) {
    if (!document.styleSheets.length) {
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(bc.createEl('style'));
    }

    var i = document.styleSheets.length-1;
    var ss = document.styleSheets[i];

    var l=0;
    if (ss.cssRules) {
      l = ss.cssRules.length;
    } else if (ss.rules) {
      // IE
      l = ss.rules.length;
    }

    if (ss.insertRule) {
      ss.insertRule(selector + ' {' + rule + '}', l);
    } else if (ss.addRule) {
      // IE
      ss.addRule(selector, rule, l);
    }
  }
};
16
Scott Gamon

私のトリックは、属性セレクターを使用することです。属性は、javascriptによって簡単に設定できます。

css

.class{ /*normal css... */}
.class[special]:after{ content: 'what you want'}

javascript

  function setSpecial(id){ document.getElementById(id).setAttribute('special', '1'); }

html

<element id='x' onclick="setSpecial(this.id)"> ...
6
Sergio Abreu

Cssをテンプレート文字列に配置するだけです。

const cssTemplateString = `.foo:[psuedoSelector]{prop: value}`;

次に、スタイル要素を作成し、スタイルタグに文字列を配置して、ドキュメントに添付します。

const styleTag = document.createElement("style");
styleTag.innerHTML = cssTemplateString;
document.head.insertAdjacentElement('beforeend', styleTag);

残りの部分は特異性によって処理されます。その後、スタイルタグを動的に削除および追加できます。これは、ライブラリの単純な代替手段であり、DOMのスタイルシート配列をいじります。ハッピーコーディング！

6
tangle sites

別の方法があります。擬似クラスを直接操作する代わりに、「ホバー」クラスや「訪問済み」クラスなど、同じものをモデル化する実際のクラスを作成します。通常の「。」でクラスをスタイルします適切なイベントが発生したときにJavaScriptを使用して要素にクラスを追加または削除できます。

5
Brandon Ramirez

JavaScriptを使用して擬似クラスルールを直接設定する代わりに、CSSファイルごとにルールを異なるように設定し、Javascriptを使用してスタイルシートをオフにし、別のスタイルシートをオンにすることができます。メソッドは A List Apart （詳細はqv。）で説明されています。

CSSファイルを次のように設定します。

<link rel="stylesheet" href="always_on.css">
<link rel="stylesheet" title="usual" href="preferred.css"> <!-- on by default -->
<link rel="alternate stylesheet" title="strange" href="alternate.css"> <!-- off by default -->

そして、JavaScriptを使用してそれらを切り替えます：

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")<i>); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}
3
TRiG

すでに述べたように、これはブラウザーがサポートするものではありません。

スタイルを動的に思いつかない場合（つまり、データベースなどからスタイルを引き出す場合）、ページの本文にクラスを追加することでこの問題を回避できるはずです。

Cssは次のようになります。

a:hover { background: red; }
.theme1 a:hover { background: blue; }

これを変更するjavascriptは次のようになります。

// Look up some good add/remove className code if you want to do this
// This is really simplified

document.body.className += " theme1";
2
Nathaniel Reinhart

スタイルシートの切り替えは、その方法です。スタイルシートを動的に構築するためのライブラリがありますので、その場でスタイルを設定できます。

http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

1
SlappyTheFish