web-dev-qa-db-ja.com

JavaScriptを介したCSS擬似要素スタイルの変更

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

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

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

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

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

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

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

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

javascriptcsscss-selectorspseudo-elementselectors-api
54
木川 炎星

[〜＃〜] edit [〜＃〜]：Thereis技術的に直接変更する方法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');
29
Chris Fritz

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

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

Javascript set CSS：after styles

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は、新しいルールのインデックスを返します。これを使用して、そのルールへの参照を取得し、後で編集に使用できます。

19
user748221

古いブラウザでの優雅な劣化に満足している場合は、CSS Varを使用できます。間違いなくここや他の場所で見た中で最も簡単な方法です。

したがって、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/

16
Wes Ruvalcaba

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

ただし、ドキュメントのヘッドに<style>タグを追加（またはプレースホルダー<style id='mystyles'>を使用してコンテンツを変更）して、スタイルを調整することはできます。 （埋め込み<style>タグは<link> 'dタグよりも優先度が高いため、カスケードの問題が発生しないようにするため、別のスタイルシートで読み込むよりもうまく機能します。

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

4
Niet the Dark Absol

この質問に似ていますが、完全に同じではない質問を投稿しました。

擬似要素のスタイルを取得および変更する方法を見つけ、人々がこのメソッドをどう思うかを尋ねました。

私の質問は 擬似要素のCSSルールの取得または変更

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

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

そして、次のもので変更します：

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

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

私はこれが「通常の」要素/スタイルだけでなく、擬似要素でも機能することを発見しました。

3
SimonT

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

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

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

JavaScriptの値を変更します。

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

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

1
LeeGee

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

ここにたくさんの良い例があります： Webkit（Safari/Chrome）でcssルールを動的に読み込む方法は？

0
Hemlock