JS_javascriptスキルで擬似要素を制御する方法のまとめ

1. 理由:

この記事は、jq を使用して疑似要素を取得する方法に関する OSC コミュニティの質問から生まれました。私が最初に考えたのは、強力な CSS クエリで擬似要素を取得できるはずだということです。

しかし、実際には CSS クエリではそれができません。つまり、$(":before")、$(dom).find(":before")、または document.querySelector(":before") を通じて :before 擬似要素を取得することはできません。

これを行うには、疑似要素 (疑似要素) を再理解する必要がありました。 JS を使用して疑似要素を直接取得できないのはなぜですか?

たとえば、::before および ::after 擬似要素は、CSS レンダリングで要素の先頭または末尾にコンテンツを挿入するために使用されます。これらはドキュメントに拘束されず、ドキュメント自体には影響しません。最終的なスタイルにのみ影響します。これらの追加されたコンテンツは DOM には表示されず、CSS レンダリング レイヤーにのみ追加されます。

実際、疑似要素はブラウザでレンダリングできますが、それ自体は DOM 要素ではありません。これはドキュメント内に存在しないため、JS はそれを直接操作できません。 jQuery のセレクターはすべて DOM 要素に基づいているため、疑似要素を直接操作することはできません。

疑似要素のスタイルを操作するにはどうすればよいですか?

そこで、JSで疑似要素を制御する方法を今後の参考にしながらまとめてみることにしました。

2. 疑似要素とは:

まず、擬似要素とは何かについて簡単に説明します。 6 つの疑似要素があります。::after、::before、::first-line、::first-letter、::selection、::backdrop です。

主要な Web ページで最も一般的に使用される擬似要素は、::after と ::before です。

これらの疑似要素のセマンティクスについては、私の他の記事「CSS 疑似要素セレクターの概要」を参照してください。

CSS3 では、疑似クラスと疑似要素を区別するために、疑似要素で 1 つのコロン (:) ではなく 2 つのコロン (::) 構文を使用することが推奨されます。ほとんどのブラウザは両方のプレゼンテーション構文をサポートしています。 ::selection のみが常に 2 つのコロン (::) で始まることができます。 IE8 は単一コロン構文のみをサポートするため、IE8 との互換性を維持したい場合は、単一コロンを使用するのが最も安全な方法です。

3. 疑似要素の属性値を取得します:

擬似要素の属性値を取得するには、window.getComputedStyle() メソッドを使用して擬似要素の CSS スタイル宣言オブジェクトを取得します。次に、getPropertyValue メソッドを使用するか、キーと値のアクセスを直接使用して、対応するプロパティ値を取得します。

構文: window.getComputedStyle(element[, pseudoElement])

パラメータは次のとおりです:

要素 (オブジェクト): 擬似要素が配置されている DOM 要素

pseudoElement (文字列): 疑似要素のタイプ。オプションの値は、「:after」、「:before」、「:first-line」、「:first-letter」、「:selection」、「:backdrop」です。

例:

// CSS代码
#myId:before {
content: "hello world!";
display: block;
width: 100px;
height: 100px;
background: red;
}
// HTML代码
<div id="myId"></div>
// JS代码
var myIdElement = document.getElementById("myId");
var beforeStyle = window.getComputedStyle(myIdElement, ":before");
console.log(beforeStyle); // [CSSStyleDeclaration Object]
console.log(beforeStyle.width); // 100px
console.log(beforeStyle.getPropertyValue("width")); // 100px
console.log(beforeStyle.content); // "hello world!"

備考:

2. デフォルトの擬似要素は「display: inline」です。表示属性が定義されていない場合、CSSで明示的にwidth属性値を「100px」などの固定サイズに設定しても、最終的に取得されるwidth値は「auto」のままとなります。これは、インライン要素の幅と高さをカスタマイズできないためです。解決策は、擬似要素の表示属性を「block」や「inline-block」などに変更することです。

方法 1. クラスを変更して疑似要素の属性値を変更します:

// CSS代码
.red::before { 
content: "red"; 
color: red; 
}
.green::before { 
content: "green"; 
color: green;
}
// HTML代码
<div class="red">内容内容内容内容</div>
// jQuery代码
$(".red").removeClass('red').addClass('green');