87

JavaScriptを介してCSS疑似要素スタイルを変更することは可能ですか？

たとえば、次のようにスクロールバーの色を動的に設定したいと思います。

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");

また、スクロールバーに次のように非表示にするように指示できるようにします。

document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";

ただし、これらのスクリプトは両方とも次を返します。

Uncaught TypeError：nullのプロパティ'style'を読み取れません

これについて他の方法はありますか？
クロスブラウザーの相互運用性は重要ではありません。Webkitブラウザーで機能するために必要なだけです。

4

8 に答える 8

51

古いブラウザでの適切な機能低下に慣れている場合は、CSS変数を使用できます。私がここや他の場所で見た中で間違いなく最も簡単な方法です。

したがって、CSSでは次のように書くことができます。

#editor {
  --scrollbar-background: #ccc;
}

#editor::-webkit-scrollbar-thumb:vertical {
  /* Fallback */
  background-color: #ccc;
  /* Dynamic value */
  background-color: var(--scrollbar-background);
}

次に、JSで、＃editor要素でその値を操作できます。

document.getElementById("#editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));

ここでJSを使用してCSS変数を操作する他の多くの例：https ：//eager.io/blog/communicating-between-javascript-and-css-with-css-variables/

于 2018-04-18T20:29:53.157 に答える
30

直接参照していない既存のスタイルシートを編集するには、ページ上のすべてのスタイルシートを繰り返し、次に各スタイルシートのすべてのルールを繰り返してから、セレクターに一致する文字列を繰り返す必要があります。

これは、疑似要素の新しいCSSを追加するために投稿したメソッドへの参照です。これは、jsから設定する簡単なバージョンです。

JavascriptセットCSS：スタイルの後

var addRule = (function (style) {
    var sheet = document.head.appendChild(style).sheet;
    return function (selector, css) {
        var propText = typeof css === "string" ? css : Object.keys(css).map(function (p) {
            return p + ":" + (p === "content" ? "'" + css[p] + "'" : css[p]);
        }).join(";");
        sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
    };
})(document.createElement("style"));

addRule("p:before", {
    display: "block",
    width: "100px",
    height: "100px",
    background: "red",
    "border-radius": "50%",
    content: "''"
});

sheet.insertRule後で編集するために使用できる、新しいルールへの参照を取得するために使用できる新しいルールのインデックスを返します。

于 2011-11-08T13:55:38.437 に答える
26

編集：この回答が説明しているように、 JavaScriptを介してCSS疑似要素スタイルを直接変更する技術的な方法がありますが、ここで提供される方法が望ましいです。

JavaScriptで疑似要素のスタイルを変更するのに最も近いのは、クラスを追加および削除してから、それらのクラスで疑似要素を使用することです。スクロールバーを非表示にする例：

CSS

.hidden-scrollbar::-webkit-scrollbar {
   visibility: hidden;
}

JavaScript

document.getElementById("editor").classList.add('hidden-scrollbar');

後で同じクラスを削除するには、次を使用できます。

document.getElementById("editor").classList.remove('hidden-scrollbar');
于 2012-08-31T00:47:00.633 に答える
16

次のようにCSSカスタムプロパティを使用して、::selection疑似要素の背景を変更しました。

/*CSS Part*/
:root {
    --selection-background: #000000;
}
#editor::selection {
    background: var(--selection-background);
}

//JavaScript Part
document.documentElement.style.setProperty("--selection-background", "#A4CDFF");
于 2020-02-05T22:12:56.010 に答える
7

JavaScriptの疑似要素にスタイルを適用することはできません。

ただし、ドキュメントの先頭にタグを追加して<style>（またはプレースホールディングを設定<style id='mystyles'>してその内容を変更して）、スタイルを調整することはできます。（これは、別のスタイルシートにロードするよりもうまく機能します。これは、埋め込まれたタグの<style>優先順位が<link>'dタグよりも高いため、カスケードの問題が発生しないようにするためです。

または、異なるクラス名を使用して、元のスタイルシートで異なる疑似要素スタイルで定義することもできます。

于 2011-11-08T05:44:48.747 に答える
4

この質問に似ていますが、完全には好きではありません。

疑似要素のスタイルを取得して変更する方法を見つけ、その方法について人々がどう思っているかを尋ねました。

私の質問は、疑似要素のcssルールを取得または変更することです。

基本的に、次のようなステートメントを介してスタイルを取得できます。

document.styleSheets[0].cssRules[0].style.backgroundColor

そして、次のように変更します。

document.styleSheets[0].cssRules[0].style.backgroundColor = newColor;

もちろん、スタイルシートとcssRulesインデックスを変更する必要があります。私の質問とそれが描いたコメントを読んでください。

これは、「通常の」要素/スタイルだけでなく、疑似要素でも機能することがわかりました。

于 2015-10-07T23:57:57.067 に答える
2

:before古い質問ですが、要素のセレクターのコンテンツの色を動的に変更しようとしたときに出くわした質問です。

私が考えることができる最も簡単な解決策は、CSS変数を使用することです。これは、質問が行われたときには適用できない解決策です。

"#editor::-webkit-scrollbar-thumb:vertical {
    background: --editorScrollbarClr
}

JavaScriptで値を変更します。

document.body.style.setProperty(
    '--editorScrollbarClr', 
     localStorage.getItem("Color")
);

他のプロパティについても同じことができます。

于 2019-07-21T13:38:26.790 に答える
0

querySelectorは、疑似クラス/疑似要素では機能しないようです。少なくともそれらでは機能しません。私が考えることができる唯一のことは、スタイルシートを動的に追加する（または既存のスタイルシートを変更する）ことで、必要なことを実行することです。

ここにたくさんの良い例があります： Webkit（Safari / Chrome）でcssルールを動的にロードするにはどうすればよいですか？

于 2010-12-19T04:07:34.883 に答える