javascript - JavaScript からの CSS 擬似クラスルールの設定

Question

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

したがって、CSS コードの類似物: a:hover { color: red }JS で。

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

score 204 · Accepted Answer

インラインの 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';

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

score 30 · Accepted Answer

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

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

score 18 · Accepted Answer

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

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);
    }
  }
};

score 16 · Accepted Answer

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

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

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

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

特異性が残りを処理します。次に、スタイルタグを動的に削除および追加できます。これは、ライブラリに代わる単純な方法であり、DOM のスタイルシート配列をいじることです。ハッピーコーディング！

score 7 · Accepted Answer

私のトリックは、属性セレクターを使用することです。属性は 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)"> ...

score 5 · Accepted Answer

javascriptを使用して疑似クラスルールを直接設定する代わりに、異なるCSSファイルでルールを異なる方法で設定してから、Javascriptを使用して1つのスタイルシートをオフにし、別のスタイルシートをオンにすることができます。メソッドはAListApart（詳細は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;
     }
   }
}

score 5 · Accepted Answer

別の選択肢があります。疑似クラスを直接操作する代わりに、「hover」クラスや「visited」クラスなど、同じものをモデル化する実際のクラスを作成します。クラスを通常の「.」でスタイルします。構文を使用すると、適切なイベントが発生したときに、JavaScript を使用して要素からクラスを追加または削除できます。

score 3 · Accepted Answer

検討できるオプションの 1 つは、CSS 変数を使用することです。アイデアは、変更したいプロパティを CSS 変数に設定することです。次に、JS 内で、その変数の値を変更します。

以下の例を参照してください

function changeColor(newColor) {
  document.documentElement.style.setProperty("--anchor-hover-color", newColor);
  // ^^^^^^^^^^^-- select the root 
}

:root {
  --anchor-hover-color: red;
}

a:hover { 
  color: var(--anchor-hover-color); 
}

<a href="#">Hover over me</a>

<button onclick="changeColor('lime')">Change to lime</button>
<button onclick="changeColor('red')">Change to red</button>

score 2 · Accepted Answer

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

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

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";

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

jquery では、ホバー疑似クラスを簡単に設定できます。

$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});

score -3 · Accepted Answer

REACTを使うなら、ラジウムというものがあります。ここでとても便利です：

インタラクティブなスタイルが指定されている場合は、小道具にハンドラーを追加します。たとえば、:hover の onMouseEnter、必要に応じて既存のハンドラーをラップします。

ホバリングなどによっていずれかのハンドラーがトリガーされると、Radium は setState を呼び出して、コンポーネント状態オブジェクトの Radium 固有のフィールドを更新します。

再レンダリング時に、Radium 固有の状態で要素のキーまたは参照を検索することにより、適用されるインタラクティブなスタイル (:hover など) を解決します。

javascript - JavaScript からの CSS 擬似クラス ルールの設定

13 に答える 13

Related

Reference

javascript - JavaScript からの CSS 擬似クラスルールの設定