JavaScript および CSS_javascript スキルを操作するためのメソッドの概要

JavaScript を使用して擬似要素属性を取得します

style 属性を通じて要素の CSS スタイル値を取得する方法は誰もが知っていますが、疑似要素の属性値を取得できるでしょうか?はい、JavaScript を使用してページ内の疑似要素にアクセスすることもできます。

コードをコピーします コードは次のとおりです:

// .element:before
の色の値を取得します var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color');
// .element:before
のコンテンツ値を取得します var content = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('コンテンツ');

ほら、疑似要素の content 属性値にアクセスできるようになりました。ダイナミックでスタイリッシュなウェブサイトを作成したい場合に、これは非常に便利なテクニックです。

クラスリスト API

多くの JavaScript ツール ライブラリには、addClass、removeClass、toggleClass などのメソッドがあります。古いブラウザとの互換性を保つために、これらのクラス ライブラリで使用されるメソッドは、最初に要素の className を検索し、クラスを追加および削除し、次に className を更新します。実際、classList と呼ばれる、CSS クラス属性を追加、削除、反転するメソッドを提供する新しい API があります:

コードをコピーします コードは次のとおりです:

myDiv.classList.add('myCssClass') // クラスを追加します
myDiv.classList.remove('myCssClass') // クラスを削除します
myDiv.classList.toggle('myCssClass') // クラスを切り替えます

ClassListAPI は長い間ほとんどのブラウザーに実装されてきましたが、最終的に IE10 に実装されました。

スタイル ルールをスタイル シートに直接追加および削除します

Element.style.propertyName を使用してスタイルを変更することはよく知られていますが、JavaScript を使用するとこれが容易になりますが、既存の CSS スタイル ルールを追加または変更する方法はご存知ですか?実はとてもシンプルなのです。

コードをコピーします コードは次のとおりです:

function addCSSRule(シート、セレクター、ルール、インデックス) {
if(sheet.insertRule) {
sheet.insertRule(セレクター "{" ルール "}", インデックス);
}
他 {
sheet.addRule(セレクター、ルール、インデックス);
}
}
// 使ってください!
addCSSRule(document.styleSheets[0], "header", "float: left");

このメソッドは通常、新しいスタイル ルールを作成するために使用されますが、既存のルールを変更したい場合も変更できます。

CSS ファイルをロード

画像、JSON、スクリプトなどの遅延読み込みは、ページ表示を高速化する良い方法です。これらの外部リソースを遅延ロードするには、curl.js などの JavaScript ローダーを使用できますが、CSS スタイル シートも遅延ロードでき、読み込みが成功するとコールバック関数によって通知されることをご存知ですか。

コードをコピーします コードは次のとおりです:

カール(
[
"名前空間/MyWidget",
"css!namespace/resources/MyWidget.css"
]、
function(MyWidget) {
// MyWidgetを操作できます
// この CSS ファイルは必要ないため、ここでは参照しません;
// ページにロードするだけです
}
});

この Web サイトで使用されている PrismJS 構文強調表示スクリプトは遅延ロードされます。すべてのリソースがロードされると、コールバック関数が起動し、コールバック関数でリソースをロードできます。とても便利です！

CSS マウス ポインター イベント

CSS の pointer-events プロパティは非常に興味深いもので、このプロパティを none に設定すると、要素が無効になるのを効果的に防ぐことができます。実際、この要素の JavaScript イベントまたはコールバック関数は無効になります。

コードをコピーします コードは次のとおりです:

.disabled { ポインタイベント: なし }

この要素をクリックすると、この要素に配置したリスナーがイベントをトリガーしないことがわかります。本当に素晴らしい機能です。イベントのトリガーを防ぐために、特定の CSS クラスが存在するかどうかを確認する必要がなくなりました。

上記は JavaScript と CSS を操作する 5 つの方法をまとめたものです。もっと良い方法があれば、ぜひお知らせください。