其实很多或者说大部分CSS文件对网页的描述都是以外部CSS的身份出现的,所以当需要做一些需要JS改变CSS而
出现的动态效果的时候,JS不得不去访问外部CSS,下面我们就来探讨一下JS访问外部CSS的例子。
这个例子就是点击按钮触发事件来改变DIV的背景颜色。首先请看CSS文件
.style1{
width: 400px;
height: 500px;
background-color: red;
}
然后是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="../css/6.css" type="text/css"></link>
</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>
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的空间支持与否来判断,其实应该有更加全面的,回来再 研究。
分享到:
相关推荐
众所周知,CSS样式有三种类型:行内样式、内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 。 一、行内样式获取相对简单,通过element.style.attr(元素.style.属性...
roundcorner.css JavaScript使用CSS模拟图片的圆角效果时使用的CSS样式文件。 第13章(\c13) 示例描述:介绍JavaScript与XML。 13.1.xml 表示书籍信息的XML信息。 13.2.js 跨浏览器兼容的XPath实现。 ...
浏览器是重要的互联网入口,一旦受到漏洞攻击,将直接影响到用户的信息安全。作为攻击者有哪些攻击思路,作为用户有哪些应对手段?在本书中我们将给出解答,带你了解浏览器安全的方方面面。本书兼顾攻击者、研究者和...
一个使用来自外部styles.jsCSS内联的React的简单示例 起床并跑步 从https://github.com/emb0624/react-css-in-js.git克隆此仓库 从根目录运行npm install 运行gulp (可能需要全局安装Gulp npm install gulp -g )...
书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入探讨...
第二部分 浏览器外部通信 第7章 向应用程序中加入Ajax 7.1 组合的技术 7.1.1 语义化XHTML和DOM 7.1.2 JavaScript和XMLHttpRequest对象 7.1.3 XML 7.1.4 一个可重用的对象 7.1.5 ...
LIVE- 项目演示:DIY- CSS基础规则选择器链接外部CSS文件级联和继承项目演示:LIVE- 项目演示:DIY- JavaScript 什么是JavaScript 为什么要学习JavaScript 引导带什么是BootStrap 将BootStrap添加到您HTML页面从CDN...
创造 在您的应用程序中... 此外,还有一个完整的查看器(使用html,CSS和JavaScript实现),可以通过浏览器中控制的所有功能来完成上述操作。 由于PDF.js仅使用现代浏览器提供的许多技术,因此不适用于Internet Expl
CSS变量Polyfill CSS变量/自定义属性的基本polyfill 这...变更日志1.2-2021-03-19 更新findSetters regex并添加外部测试 (总有一天我将学习编写测试用例) let var获得更好的旧浏览器支持1.1.2-2019-03-23 更新findSe
可用于服务器渲染很少有依赖性,很小(20k,6k压缩) 没有生成要包含的外部CSS文件自动前缀样式安装阿芙罗狄蒂通过分发: npm install --save aphroditeAPI 如果您想观看介绍性视频,可以在 找到。 import React , ...
同样,如果您正在查看网站,则可以在查看github页面特征通过pandoc直接从降价列表中pandoc 保留可访问的语义HTML 没有javascript或其他框架,没有外部依赖项,仅使用一个小的.css文件使用html模板直接创建图表,或...
IE 5或更高版本 Mozilla Firefox 1.5.0.3或更高版本 服务器采用IIS5.1 或以上版本 数据库使用MS Access 2000以上 2.本书所附光盘实例代码: 第1章(\第1章) 查看1.2.htm中noscript显示效果的方法如下: 1.将...
出于这个原因,该项目是纯 JavaScript/CSS/HTML,没有使用任何外部框架。如本文所述,在网络浏览器中加载页面(仅在 Chrome 中测试,因为 OBS 使用 Chromium 作为其浏览器源)将直接运行游戏以进行测试/调整/实验。 ...
javascript 创建 CSS 属性的优点是您可以使用运行时变量您可以使用作用域(全局、特定于样式表和特定于样式引用) 与 css 预处理器输出相比,如果您使用大量 mixin 和类继承,则会节省大量字节您绕过了一些浏览器 ...
2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中输入下述地址:http://localhost/1.2.htm • 1.1.htm 多段代码相互调用 • 1.2....