Home  >  Article  >  Web Front-end  >  JavaScript access controls external CSS and determines browser version

JavaScript access controls external CSS and determines browser version

高洛峰
高洛峰Original
2016-11-26 10:04:121000browse

其实很多或者说大部分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









The first css

    var cssResult = document.styleSheets[0].rules;

                             
              if(eventObj.value==" Black"){
         style1.style.backgroundColor="black";      }
function test(eventObj){
//Get the content in mycss.css All class selectors
//This 0 means the first css introduced in the HTML page
var cssResult = document.styleSheets[0].rules;
//Get the specified CSS class selector according to the subscript
var style1 = cssResult[0];

if(eventObj.value=="black"){
style1.style.backgroundColor="black";
}else{
style1.style.backgroundColor="red";
}
}This function is, and its meaning has been introduced. It should be said that it is a good way to access external CSS. Of course, for browser compatibility, it is necessary to determine the browser version. The test1() function explains this , respectively, are judged by using the space support of the ActiveX window. In fact, there should be a more comprehensive one, and we will study it when we come back.



Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn