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

備考:

1. getPropertyValue() と直接キー値アクセスの両方で CSSStyleDeclaration オブジェクトにアクセスできます。それらの違いは次のとおりです:

float 属性の場合、キー値アクセスを使用する場合、getComputedStyle(element, null).float を直接使用することはできませんが、cssFloat および styleFloat; キーと値のアクセスを直接使用する場合は、属性キーを次のようにキャメルケースで記述する必要があります。 getPropertyValue() メソッドは、キャメル ケースで記述する必要はありません (キャメル ケースはサポートされていません)。たとえば、 style.getPropertyValue("border-top-color"); getPropertyValue() メソッドは IE9 以降およびその他の最新ブラウザでサポートされていますが、代わりに getAttribute() メソッドを使用できます。

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

4. 疑似要素のスタイルを変更します:

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

例を挙げてください:

方法 2. CSSStyleSheet の insertRule を使用して疑似要素のスタイルを変更します:

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

例を挙げてください:

方法 3. c9ccee2e6ea535a969eb3f532ad9fe89 の内部スタイルを 93f0f5c25f18dab9d176bd4f6de5d30e に挿入します。

document.styleSheets[0].addRule('.red::before','color: green'); // 支持IE document.styleSheets[0].insertRule('.red::before { color: green }', 0); // 支持非IE的现代浏览器

または jQuery を使用します:

var style = document.createElement("style"); 
document.head.appendChild(style); 
sheet = style.sheet; 
sheet.addRule('.red::before','color: green'); // 兼容IE浏览器
sheet.insertRule('.red::before { color: green }', 0); // 支持非IE的现代浏览器

5. 疑似要素の content 属性値を変更します:

$('<style>.red::before{color:green}</style>').appendTo('head');

方法 1. CSSStyleSheet の insertRule を使用して、疑似要素のスタイルを変更します:

方法 2. DOM 要素の data-* 属性を使用してコンテンツの値を変更します:

var latestContent = "修改过的内容";
var formerContent = window.getComputedStyle($('.red'), '::before').getPropertyValue('content'); document.styleSheets[0].addRule('.red::before','content: "' + latestContent + '"'); document.styleSheets[0].insertRule('.red::before { content: "' + latestContent + '" }', 0);

六. :before和:after伪元素的常见用法总结：

1. 利用content属性，为元素添加内容修饰：

1） 添加字符串：

使用引号包括一段字符串，将会向元素内容中添加字符串。栗子：

a:after { content: "after content"; }

2） 使用attr()方法，调用当前元素的属性的值：

栗子：

a:after { content: attr(href); }
a:after { content: attr(data-attr); }

3）使用url()方法，引用多媒体文件：

栗子：

a::before { content: url(logo.png); }

4) 使用counter()方法，调用计时器：

栗子：

h:before { counter-increment: chapter; cotent: "Chapter " counter(chapter) ". " }

2. 清除浮动：

.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

3. 特效妙用：

// CSS代码
a {
position: relative;
display: inline-block;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a::before, a::after { 
content: "";
transition: all 0.2s;
}
a::before { 
left: 0;
}
a::after { 
right: 0;
}
a:hover::before, a:hover::after { 
position: absolute;
}
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right: -20px; }
// HTML代码
<a href="#">我是个超链接</a>

4. 特殊形状的实现：

举个栗子：（譬如对话气泡）

// CSS代码
.tooltip {
position: relative;
display: inline-block;
padding: 5px 10px;
background: #80D4C8;
}
.tooltip:before {
content: "";
display: block;
position: absolute;
left: 50%;
margin-left: -5px;
bottom: -5px;
width: 0; 
height: 0; 
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #80D4C8;
}
// HTML代码
<div class="tooltip">I'm a tooltip.</div>

:before 和 :after 伪元素结合更多CSS3强大的特性，还可完成非常多有趣的特效和 hack ，这里权当抛砖引玉。

六. 一点小小建议：

伪元素的content属性很强大，可以写入各种字符串和部分多媒体文件。但是伪元素的内容只存在于CSS渲染树中，并不存在于真实的DOM中。所以为了SEO优化，最好不要在伪元素中包含与文档相关的内容。

修改伪元素的样式，建议使用通过更换class来修改样式的方法。因为其他两种通过插入行内CSSStyleSheet的方式是在JavaScript中插入字符代码，不利于样式与控制分离；而且字符串拼接易出错。

修改伪元素的content属性的值，建议使用利用DOM的data-*属性来更改。

以上所述是小编给大家介绍的JS控制伪元素的方法汇总，希望对大家有所帮助！