ブラウザがアップグレードと改善を続けるにつれて、CSSとJavaScriptの境界はますますぼやけています。もともと彼らは完全に異なる機能の原因でしたが、最終的には、それらはすべてWebフロントエンドテクノロジーに属し、互いに緊密に連携する必要があります。当社のWebページには.JSと.CSSファイルがありますが、これはCSSとJSが独立しており、相互作用できないことを意味するものではありません。以下で説明したいJavaScriptとCSSと一緒に作業するこれらの5つの方法を知らないかもしれません！
JavaScriptを使用して、擬似要素属性を取得します
誰もが要素のスタイル属性を使用してCSSスタイルの値を取得する方法を知っていますが、擬似要素の属性値を取得できますか？はい、JavaScriptを使用してページ内の擬似要素にアクセスすることもできます。
コードコピーは次のとおりです。
<span style = "font-size：18px;"> // .elementの色値を取得：前
var color = window.getComputedStyle（
document.queryselector（ '。要素'）、 '：before'
）.getPropertyValue（ 'color'）;
// .elementのコンテンツ値を取得：前
var content = window.getComputedStyle（
document.queryselector（ '。要素'）、 '：before'
）.getPropertyValue（ 'content'）; </span>
あなたはそれを見たことがありますか？ダイナミックでシックなWebサイトを作成したい場合、これは非常に便利なテクニックです！
クラスリストAPI
多くのJavaScript Toolsライブラリには、Addclass、Removeclass、Toggleclassがあります。古いブラウザと互換性を持つために、これらのクラスライブラリはメソッドを使用して要素のクラス名を検索し、このクラスを追加および削除し、クラス名を更新します。実際、クラスリストと呼ばれるCSSクラス属性を追加、削除、反転するメソッドを提供する新しいAPIがあります。
コードコピーは次のとおりです。
<span style = "font-size：18px;"> mydiv.classlist.add（ 'mycssclass'）;
mydiv.classlist.remove（ 'mycssclass'）;
mydiv.classlist.toggle（ 'mycssclass'）;
ほとんどのブラウザはクラスリストAPIを非常に早く実装し、最終的にIE10も実装しました。
スタイルのルールを直接追加および削除してスタイルシートを削除します
私たちは皆、element.style.propertynameを使用してスタイルを使用することに非常に精通していますが、既存のCSSスタイルのルールを追加または修正する方法を知っていますか？実際には非常にシンプルです。
コードコピーは次のとおりです。
<span style = "font-size：18px;"> function addcssrule（sheet、selector、rules、index）{
if（sheet.insertrule）{
Sheet.InserTrule（selector + "{" + rules + "}"、index）;
}
それ以外 {
Sheet.Addrule（Selector、Rules、Index）;
}
}
//それを使用してください！
addcssrule（document.stylesheets [0]、 "header"、 "float：left"）;
</span>
この方法は通常、新しいスタイルのルールを作成するために使用されますが、既存のルールを変更する場合はこれを行うことができます。
CSSファイルのロード
写真、JSON、スクリプトなどの怠zyなロードは、ページ表示をスピードアップする良い方法です。 Curl.JSおよびその他のJavaScriptローダーを使用して、これらの外部リソースの読み込みを遅らせることができます。
コードコピーは次のとおりです。
<span style = "font-size：18px;"> curl（
[
「名前空間/mywidget」、
「css！namespace/resources/mywidget.css」
]、、
function（mywidget）{
// mywidgetで操作できます
//必要ではないため、このCSSファイルへの参照はここにありません。
//ページにロードする必要があります
}
}）; </span>
すべてのリソースがロードされると、コールバック関数がトリガーされ、コールバック関数にロードできます。とても便利です！
CSSマウスポインターイベント
CSSマウスポインターイベントのポインターイベント属性は、この属性に非常に似ています、この要素のJavaScriptイベントまたはコールバック関数から禁止されています！
コードコピーは次のとおりです。
<span style = "font-size：18px;">
この要素をクリックすると、この要素に配置したリスナーがイベントがトリガーされないことがわかります。魔法の特徴、本当に - イベントがトリガーされるのを防ぐために、特定のCSSクラスが存在するかどうかを確認する必要はありません。
これは、あなたがまだ発見していないかもしれないCSSとJavaScriptと相互作用する5つの方法です。新しい発見はありますか？共有する！