>  기사  >  웹 프론트엔드  >  JavaScript 액세스는 외부 CSS를 제어하고 브라우저 버전을 결정합니다.

JavaScript 액세스는 외부 CSS를 제어하고 브라우저 버전을 결정합니다.

高洛峰
高洛峰원래의
2016-11-26 10:04:12964검색

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









[html]
function test(eventObj){
//mycss를 가져옵니다. All CSS의 클래스 선택기
              //이 0은 HTML 페이지에 도입된 첫 번째 CSS를 의미합니다.                                                                           아래 첨자 기반 클래스 선택기
var style1 = cssResult[0]; 🎜>
if(eventObj.value= ="검정색"){
style1.style.back groundColor="black";
                                                                       css.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으로 문의하세요.