ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript アクセスは外部 CSS を制御し、ブラウザのバージョンを決定します

JavaScript アクセスは外部 CSS を制御し、ブラウザのバージョンを決定します

高洛峰
高洛峰オリジナル
2016-11-26 10:04:12999ブラウズ

其实很多或者说大部分CSS文件对网页的描述都是以外部CSS的身份出现的,所以当需要做一些需要JS改变CSS而

出现的动态效果的时候,JS不得不去访问外部CSS,下面我们就来探讨一下JS访问外部CSS的例子。

这个例子就是点击按钮触发事件来改变DIV的背景颜色。首先请看CSS文件

[css]
.style1{ 
    width: 400px; 
    height: 500px; 
    background-color: red; 

.style1{
 width: 400px;
 height: 500px;
 background-color: red;
}
然后是HTML文件

[html]
 
 
   
    test.html 
     
     
     
     
     
     
     
   
   
   

div1
 
     
    
  


 
    
   
 


 
    test.html
 
   
   
   
   
   
   
 
 
  
div1








最初の CSS
var cssResult = document.styleSheets[0].rules;

if(eventObj.value==" Black"){
style1.style.backgroundColor="black "; }
function test(eventObj){
//mycss.css のコンテンツを取得します。すべてのクラス セレクター
//この 0 は、HTML ページに導入された最初の CSS を意味します
var cssResult = document.styleSheets[0].rules;
//添字に従って指定された CSS クラス セレクターを取得します
var style1 = cssResult[0];

if(eventObj.value=="black"){
style1.style.backgroundColor="black";
}else {
style1.style.backgroundColor="red";
}
}この機能は、ブラウザの互換性のために、外部 CSS にアクセスするための良い方法であると言えます。 test1() 関数はブラウザのバージョンを決定するために必要であり、それぞれ ActiveX ウィンドウのスペース サポートを使用して判断されます。実際には、より包括的な関数があるはずです。これについては後で検討します。



声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。