あなたが知らない JavaScript と CSS を操作する 5 つの方法_JavaScript スキル

ブラウザーがアップグレードと改良を続けるにつれて、CSS と JavaScript の間の境界はますます曖昧になってきています。もともとこれらはまったく異なる機能を担当していましたが、最終的にはすべて Web フロントエンド技術に属しており、相互に緊密に連携する必要があります。私たちは皆、Web ページに .js ファイルと .css ファイルを持っていますが、これは CSS と js が独立していて相互作用できないという意味ではありません。あなたは、JavaScript と CSS が連携できる次の 5 つの方法を知らないかもしれません。

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');

なるほど、擬似要素の content プロパティ値にアクセスできます。ダイナミックでスタイリッシュなウェブサイトを作成したい場合に、これは非常に便利なテクニックです。

classList API

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

Copy codeコードは次のとおりです:

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

ほとんどのブラウザでは classListAPI が使用されています。長い間実装されてきましたが、ついに IE10 に実装されました。

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

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

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

function addCSSRule(シート, セレクター, ルール, インデックス) {
if(sheet.insertRule) {
sheet.insertRule(セレクター "{" ルール "}", インデックス);
}
else {
sheet.addRule(selector, rules,index);
}
}
// 使ってみましょう!
addCSSRule(document.styleSheets[0], "header ", " float: left");

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

CSS ファイルの読み込み

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

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

curl(
[
"namespace/MyWidget",
"css!namespace/resources/MyWidget.css"
],
function(MyWidget) {
// MyWidget で操作できます
// この CSS ファイルは必要ないため、ここでは参照しません
// ページにロードされていればよいだけです
}
});

すべてのリソースがロードされると、コールバック関数がトリガーされ、コールバック関数でロードできます。とても便利です！

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

CSS マウス ポインター イベント pointer-events プロパティは非常に興味深いもので、このプロパティを none に設定すると、無効化を効果的に防ぐことができます。この要素について「だから何?」と思われるかもしれませんが、実際には、この要素の JavaScript イベントまたはコールバック関数が無効になります。

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

.disabled { pointer-events: none }

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

これらは、まだ知られていないかもしれない CSS と JavaScript を操作する 5 つの方法です。何か新しい発見はありますか？共有する！