JavaScript と CSS を操作する 5 つの方法を学びます

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

関連する学習の推奨事項: JavaScript ビデオ チュートリアル

JavaScript を使用して擬似要素 (擬似要素) 属性を取得する

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

// Get the color value of .element:before
var color = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('content');

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

classList API

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

myp.classList.add('myCssClass'); // Adds a class

myp.classList.remove('myCssClass'); // Removes a class

myp.classList.toggle('myCssClass'); // Toggles a class

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

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

誰もが、スタイルを変更するために element.style.propertyName を使用することに慣れています。JavaScript を使用すると便利です。しかし、既存の CSS スタイル ルールを追加または変更する方法はご存知ですか?実はとてもシンプルなのです。

function addCSSRule(sheet, selector, rules, index) {
	if(sheet.insertRule) {
		sheet.insertRule(selector + "{" + rules + "}", index);
	}
	else {
		sheet.addRule(selector, rules, index);
	}
}

// Use it!
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文件引用，因为不需要;
		// 我们只需要它已经加载到页面上了
	}
});

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

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

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

.disabled { pointer-events: none; }

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

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

以上がJavaScript と CSS を操作する 5 つの方法を学びますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。