欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

JavaScript访问控制外部CSS并判断浏览器版本

程序员文章站 2023-12-23 08:40:22
...
其实很多或者说大部分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]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript">
function test(eventObj){
//获取mycss.css中的所有类选择器
//这个0的意思是HTML页面中引入的第一个css
var cssResult = document.styleSheets[0].rules;
//获取指定的CSS类选择器,根据下标
var style1 = cssResult[0];

if(eventObj.value=="黑色"){
style1.style.backgroundColor="black";
}else{
style1.style.backgroundColor="red";
}
}

function test1(){
if(window.XMLHttpRequest){
if(!window.ActiveXObject){
alert("Mozilla, Safari");
}else
alert("IE");
}else{
alert("IE6");
}
}
</script>
<link rel="stylesheet" href="http://www.php1.cn/"> </head>

<body>
<div id="div1" class="style1">div1</div>
<input type="button" value="黑色" onclick="test(this);"/>
<input type="button" value="红色" onclick="test(this);"/>
<br/><br/><br/>
<input type="button" value="检测浏览器版本" onclick="test1();"/>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript">
function test(eventObj){
//获取mycss.css中的所有类选择器 www.2cto.com
//这个0的意思是HTML页面中引入的第一个css
var cssResult = document.styleSheets[0].rules;
//获取指定的CSS类选择器,根据下标
var style1 = cssResult[0];

if(eventObj.value=="黑色"){
style1.style.backgroundColor="black";
}else{
style1.style.backgroundColor="red";
}
}

function test1(){
if(window.XMLHttpRequest){
if(!window.ActiveXObject){
alert("Mozilla, Safari");
}else
alert("IE");
}else{
alert("IE6");
}
}
</script>
<link rel="stylesheet" href="http://www.php1.cn/"> </head>

<body>
<div id="div1" class="style1">div1</div>
<input type="button" value="黑色" onclick="test(this);"/>
<input type="button" value="红色" onclick="test(this);"/>
<br/><br/><br/>
<input type="button" value="检测浏览器版本" onclick="test1();"/>
</body>
</html>

[html]
function test(eventObj){
//获取mycss.css中的所有类选择器
//这个0的意思是HTML页面中引入的第一个css
var cssResult = document.styleSheets[0].rules;
//获取指定的CSS类选择器,根据下标
var style1 = cssResult[0];

if(eventObj.value=="黑色"){
style1.style.backgroundColor="black";
}else{
style1.style.backgroundColor="red";
}
}
function test(eventObj){
//获取mycss.css中的所有类选择器
//这个0的意思是HTML页面中引入的第一个css
var cssResult = document.styleSheets[0].rules;
//获取指定的CSS类选择器,根据下标
var style1 = cssResult[0];

if(eventObj.value=="黑色"){
style1.style.backgroundColor="black";
}else{
style1.style.backgroundColor="red";
}
}这个函数就是，其中的含义都已经介绍，应该说是一种很好的访问外部CSS的方式，当然了，对于浏览器的兼容需要

判断浏览器的版本，test1()函数说明了这个，分别是使用ActiveX的window的空间支持与否来判断，其实应该有更加全面的，回来再 研究。

相关标签： JavaScript

上一篇：

下一篇：

推荐阅读