`
BradyZhu
  • 浏览: 245527 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

 
阅读更多

其实很多或者说大部分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的空间支持与否来判断,其实应该有更加全面的,回来再 研究。


分享到:
评论

相关推荐

    老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

    众所周知,CSS样式有三种类型:行内样式、内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 。 一、行内样式获取相对简单,通过element.style.attr(元素.style.属性...

    JavaScript完全自学宝典 源代码

    roundcorner.css JavaScript使用CSS模拟图片的圆角效果时使用的CSS样式文件。 第13章(\c13) 示例描述:介绍JavaScript与XML。 13.1.xml 表示书籍信息的XML信息。 13.2.js 跨浏览器兼容的XPath实现。 ...

    白帽子讲浏览器安全.钱文祥(带详细书签).pdf

    浏览器是重要的互联网入口,一旦受到漏洞攻击,将直接影响到用户的信息安全。作为攻击者有哪些攻击思路,作为用户有哪些应对手段?在本书中我们将给出解答,带你了解浏览器安全的方方面面。本书兼顾攻击者、研究者和...

    react-css-in-js:JS中的React CSS示例

    一个使用来自外部styles.jsCSS内联的React的简单示例 起床并跑步 从https://github.com/emb0624/react-css-in-js.git克隆此仓库 从根目录运行npm install 运行gulp (可能需要全局安装Gulp npm install gulp -g )...

    JavaScript基础教程第8版

    书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入探讨...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

    第二部分 浏览器外部通信  第7章 向应用程序中加入Ajax   7.1 组合的技术   7.1.1 语义化XHTML和DOM   7.1.2 JavaScript和XMLHttpRequest对象   7.1.3 XML   7.1.4 一个可重用的对象   7.1.5 ...

    Tutorial-BootStrap:HTML,CSS,Javascript和BootStrap简介

    LIVE- 项目演示:DIY- CSS基础规则选择器链接外部CSS文件级联和继承项目演示:LIVE- 项目演示:DIY- JavaScript 什么是JavaScript 为什么要学习JavaScript 引导带什么是BootStrap 将BootStrap添加到您HTML页面从CDN...

    Create-a-Delphi-PDF-Embedded-Viewer-:使用Javascript和Web浏览器创建PDF脱机查看器

    创造 在您的应用程序中... 此外,还有一个完整的查看器(使用html,CSS和JavaScript实现),可以通过浏览器中控制的所有功能来完成上述操作。 由于PDF.js仅使用现代浏览器提供的许多技术,因此不适用于Internet Expl

    css-variables-polyfill:CSS变量的基本polyfillcustom-properties

    CSS变量Polyfill CSS变量/自定义属性的基本polyfill 这...变更日志1.2-2021-03-19 更新findSetters regex并添加外部测试 (总有一天我将学习编写测试用例) let var获得更好的旧浏览器支持1.1.2-2019-03-23 更新findSe

    阿芙罗狄蒂:与框架无关CSS-in-JS,支持服务器端呈现,浏览器前缀和最少CSS生成

    可用于服务器渲染很少有依赖性,很小(20k,6k压缩) 没有生成要包含的外部CSS文件自动前缀样式安装阿芙罗狄蒂通过分发: npm install --save aphroditeAPI 如果您想观看介绍性视频,可以在 找到。 import React , ...

    ChartS.css

    同样,如果您正在查看网站,则可以在查看github页面特征通过pandoc直接从降价列表中pandoc 保留可访问的语义HTML 没有javascript或其他框架,没有外部依赖项,仅使用一个小的.css文件使用html模板直接创建图表,或...

    精通JavaScript

    IE 5或更高版本 Mozilla Firefox 1.5.0.3或更高版本 服务器采用IIS5.1 或以上版本 数据库使用MS Access 2000以上 2.本书所附光盘实例代码: 第1章(\第1章) 查看1.2.htm中noscript显示效果的方法如下: 1.将...

    drop游戏的示例实现_JavaScript_代码_下载

    出于这个原因,该项目是纯 JavaScript/CSS/HTML,没有使用任何外部框架。如本文所述,在网络浏览器中加载页面(仅在 Chrome 中测试,因为 OBS 使用 Chromium 作为其浏览器源)将直接运行游戏以进行测试/调整/实验。 ...

    react-css-builder:用于创建React组件样式对象的 CSS 构建器

    javascript 创建 CSS 属性的优点是您可以使用运行时变量您可以使用作用域(全局、特定于样式表和特定于样式引用) 与 css 预处理器输出相比,如果您使用大量 mixin 和类继承,则会节省大量字节您绕过了一些浏览器 ...

    精通javascript

    2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中输入下述地址:http://localhost/1.2.htm • 1.1.htm 多段代码相互调用 • 1.2....

Global site tag (gtag.js) - Google Analytics