JavaScriptとCSSの相互作用の5つの方法を知っているとは限りません。

ブラウザのアップグレードが進むにつれて、CSSとJavaScriptの間の限界はますますぼやけてきた。本来は全く違った機能を担っていますが、最終的には、それらはすべてウェブページの先端技術に属しています。互いに密接な協力が必要です。私たちのホームページには.jsファイルと.cssファイルがありますが、CSSとjsは独立して相互作用できないという意味ではありません。次の5つのJavaScriptとCSSの共同協力の方法はあなたが知っているとは限らないかもしれません。JavaScriptで疑似要素属性を取得します。皆さんはどのように一つの要素のstyle属性を通じてCSSスタイルの値を取得するか分かりますが、疑似要素の属性値を取得できますか？はい、JavaScriptを使ってページの中の疑似要素にもアクセスできます。

 
<span style="font-size:18px;">// 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');</span> 

を見ましたか？疑似要素の中のcontent属性値にアクセスできます。ダイナミックでスタイリッシュなウェブサイトを作成したいなら、これは非常に有用な技術です。classit List APIの多くのJavaScriptツール庫にはaddClass、removeClass、togleClassなどの方法があります。旧式のブラウザに対応するために、これらのクラスライブラリは元素のクラス名を検索し、このクラスを追加し、削除して、クラス名を更新します。実際には、新しいAPIが提供されています。CSSクラスの属性を削除し、反転する方法は、classis List：

 
<span style="font-size:18px;">myDiv.classList.add('myCssClass'); // Adds a class 
myDiv.classList.remove('myCssClass'); // Removes a class 
myDiv.classList.toggle('myCssClass'); // Toggles a class</span> 

というほとんどのブラウザでは、早くからclass ListAPIが実現されています。そして、最終的にはIE 10でも実現されました。直接にスタイル表を追加し、削除します。私たちはelement.style.propertyNameを使ってスタイルを修正します。JavaScriptを使って、これらの方法を教えてくれますが、既存のCSSスタイルルールを追加したり修理したりする方法を知っていますか？実はとても簡単です。

 
<span style="font-size:18px;">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"); 
</span> 

この方法は、通常、新しいスタイルルールを作成するために使用されますが、既存のルールを変更したいなら、そうすることもできます。CSSファイルの読み込み遅延画像、JSON、スクリプトなどは、ページの表示速度を上げるための良い方法です。これらの外部リソースのローディングを遅延させるために、curl.jsなどのJavaScriptブースターを使用してもいいですが、CSSスタイルテーブルはローディングを遅延させてもいいですか？またローディングが成功したら、コールバック関数が通知されます。

 
<span style="font-size:18px;">curl( 
[ 
"namespace/MyWidget", 
"css!namespace/resources/MyWidget.css" 
], 
function(MyWidget) { 
//     MyWidget     
//        CSS    ，     ; 
//                 
} 
});</span> 

は、すべてのリソースがロードされると、コールバック関数がトリガされ、コールバック関数でそれをロードすることができます。とても役に立ちますCSSマウスポインタイベントCSSマウスポインタイベントのpointer-events属性は非常に興味深いです。その効果はJavaScriptに似ています。この属性をnoneに設定すると、この要素を禁止する効果があります。これはどうですか？しかし、実際には、この要素のいずれかのJavaScriptイベントまたはコールバック関数を禁止しています。

 
<span style="font-size:18px;">.disabled { pointer-events: none; }</span> 

この要素をクリックしても、この要素に置いてあるモニターは何もトリガされないことが分かります。一つの不思議な機能、本当に――あなたはある事件が触発されることを防止するために、あるcss類が存在するかどうかを検査する必要がありません。この5をあげます。まだ発見されていないCSSとJavaScriptの相互作用の方法です。まだ新しい発見がありますか？分けてください