JavaScriptを使用して、擬似要素属性を取得します
誰もが要素のスタイル属性を使用してCSSスタイルの値を取得する方法を知っていますが、擬似要素の属性値を取得できますか？はい、JavaScriptを使用してページ内の擬似要素にアクセスすることもできます。
コードコピーは次のとおりです。
// .lementの色値を取得：前
var color = window.getComputedStyle（
document.queryselector（ '。要素'）、 '：before'
）.getPropertyValue（ 'color'）;
// .elementのコンテンツ値を取得：前
var content = window.getComputedStyle（
document.queryselector（ '。要素'）、 '：before'
）.getPropertyValue（ 'content'）;
見たことがありますか？擬似エレメントのコンテンツ属性値にアクセスできます。ダイナミックでシックなWebサイトを作成したい場合、これは非常に便利なテクニックです！
クラスリストAPI
多くのJavaScriptツールライブラリには、AddClass、RemoveClass、Toggleclassがあります。古いブラウザと互換性を持つために、これらのクラスライブラリはメソッドを使用して要素のクラス名を検索し、このクラスを追加および削除し、クラス名を更新します。実際、クラスリストと呼ばれるCSSクラス属性を追加、削除、反転するメソッドを提供する新しいAPIがあります。
コードコピーは次のとおりです。
mydiv.classlist.add（ 'mycssclass'）; //クラスを追加します
mydiv.classlist.remove（ 'mycssclass'）; //クラスを削除します
mydiv.classlist.toggle（ 'mycssclass'）; //クラスを切り替えます
ほとんどのブラウザはクラスリストAPIを非常に早く実装し、最終的にIE10も実装しました。
スタイルのルールを直接追加および削除してスタイルシートを削除します
私たちは皆、element.style.propertynameを使用してスタイルを変更することに非常に精通しています。 JavaScriptを使用すると、これを行うのに役立ちますが、既存のCSSスタイルのルールを追加または修正する方法を知っていますか？実際には非常にシンプルです。
コードコピーは次のとおりです。
関数addcsSrule（シート、セレクター、ルール、インデックス）{
if（sheet.insertrule）{
Sheet.InserTrule（selector + "{" + rules + "}"、index）;
}
それ以外 {
Sheet.Addrule（Selector、Rules、Index）;
}
}
//それを使用してください！
addcssrule（document.stylesheets [0]、 "header"、 "float：left"）;
この方法は通常、新しいスタイルのルールを作成するために使用されますが、既存のルールを変更する場合はこれを行うことができます。
CSSファイルのロード
写真、JSON、スクリプトなどの怠zyなロードは、ページ表示をスピードアップする良い方法です。 Curl.jsおよびその他のJavaScriptローダーを使用して、これらの外部リソースの読み込みを遅らせることができます。しかし、CSSスタイルのシートも負荷を遅らせることができ、荷重が成功した後にコールバック関数に通知されることをご存知ですか。
コードコピーは次のとおりです。
カール（
[
「名前空間/mywidget」、
「css！namespace/resources/mywidget.css」
]、、
function（mywidget）{
// mywidgetで操作できます
//必要ではないため、このCSSファイルへの参照はここにありません。
//ページにロードする必要があります
}
}）;
このWebサイトで使用されているPrismjs構文の強調表示スクリプトは、怠zyなロードです。すべてのリソースがロードされると、コールバック関数がトリガーされ、コールバック関数にロードできます。とても便利です！
CSSマウスポインターイベント
CSSマウスポインターイベントのポインターイベント属性は非常に興味深いです。その有効性はJavaScriptに非常に似ています。この属性をなしに設定すると、要素が無効になるのを効果的に防ぐことができます。 「そうだ」と言うかもしれませんが、実際、この要素のJavaScriptイベントやコールバック機能を禁止しています！
コードコピーは次のとおりです。
.disabled {pointer-events：none; }
この要素をクリックすると、この要素に配置したリスナーがイベントがトリガーされないことがわかります。魔法の特徴、本当に - イベントがトリガーされるのを防ぐために、特定のCSSクラスが存在するかどうかを確認する必要はありません。
上記は、JavaScriptとCSSと対話する5つの方法です。より良いものがあれば、教えてください。この記事は継続的に更新されます。