JavaScript的DOM_StyleSheet操作内联或链接样式表
使用 style 属性，仅仅只能获取和设置行内的样式，如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了，使用 getComputedStyle 和currentStyle，这只能获取却无法设置。
一、检测是否支持StyleSheet类型操作通过<link>元素和<style>元素包含的样式表。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box');
alert(document.implementation.hasFeature('StyleSheets', '2.0')); //检测是否支持 链接式或内联式样式表
alert(document.getElementsByTagName('link')[0]); //HTMLLinkElement ,如果没有时undefined
alert(document.getElementsByTagName('style')[0]); //HTMLStyleElement ,如果没有时undefined
}
</script>
<style type="text/css">
.aaa{
font-size:20px;
color:red;
background:#ccc;
}
.bbb{
font-size:30px;
color:blue;
background:orange;
}
.ccc{
float:right;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
二、获取CSSStyleSheet对象
这两个元素本身返回的是 HTMLLinkElement 和 HTMLStyleElement 类型，但CSSStyleSheet 类型更加通用一些。得到这个类型非 IE 使用 sheet 属性，IE 使用 styleSheet；
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box'); var style = document.getElementsByTagName('style')[0];
//var sheet = style.sheet;//IE6,7,8不支持
//var sheet = style.styleSheet;//非IE不支持 //做兼容
var sheet = style.sheet || style.styleSheet; //得到 CSSStyleSheet
alert(sheet);
} </script>
<style type="text/css">
.aaa{
font-size:20px;
color:red;
background:#ccc;
}
.bbb{
font-size:30px;
color:blue;
background:orange;
}
.ccc{
float:right;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
除了上面的方法可以得到 CSSStyleSheet 类型，还有一种方法是通过 document 的styleSheets 属性来获取。所有浏览器都兼容的
<script type="text/javascript">
window.onload = function(){
//var sheet = document.styleSheets;//得到的[object StyleSheetList]集合
var sheet = document.styleSheets[0];//得到第一个CSS样式表对象
alert(sheet);
} </script>
<style type="text/css">
.aaa{
font-size:20px;
color:red;
background:#ccc;
}
.bbb{
font-size:30px;
color:blue;
background:orange;
}
.ccc{
float:right;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
三、CSSStyleSheet对象的属性和方法
<script type="text/javascript">
window.onload = function(){
//var sheet = document.styleSheets; //得到的[object StyleSheetList]集合
var sheet = document.styleSheets[0]; //得到第一个CSS样式表对象
//alert(sheet.disabled); //false，可设置为 true，设置为true后样式被禁用，网页的样式也就没有了
//alert(sheet.href); //css 的 URL,如果是内联样式表，不是使用link链接进来的为null
//alert(sheet.media); //MediaList，集合 支持度也不是很好
//alert(sheet.media[0]); //第一个 media 的值
//alert(sheet.title); //得到 title 属性的值 alert(sheet.cssRules); //CSSRuleList，样式表规则集合 样式规则就是一群样式表示一个规则
alert(sheet.cssRules[0]); //得到的第一个规则，还是一个集合
alert(sheet.cssRules[0].cssText); //把第一个规则的css文本即所有属性和值获取到
alert(sheet.cssRules[0].selectorText); //得到第一个规则的css选择符
//sheet.deleteRule(0); //删除第一个样式规则
sheet.insertRule("body {background-color:red}", 0); //在第一个位置添加一个样式规则
} </script>
<style type="text/css">
.aaa{
font-size:20px;
color:red;
background:#ccc;
}
.bbb{
font-size:30px;
color:blue;
background:orange;
}
.ccc{
float:right;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
cssRules、deleteRule、insertRule这三个方法IE6,7,8不支持，可以使用下面的替代方法，但只能支持IE
<script type="text/javascript">
window.onload = function(){
//var sheet = document.styleSheets;//得到的[object StyleSheetList]集合
var sheet = document.styleSheets[0];//得到第一个CSS样式表对象
alert(sheet.rules); //代替 cssRules 的 IE 版本
sheet.removeRule(0); //代替 deleteRule 的 IE 版本
sheet.addRule("body", "background-color:red", 0); //代替 insertRule 的 IE 版本
} </script>
<style type="text/css">
.aaa{
font-size:20px;
color:red;
background:#ccc;
}
.bbb{
font-size:30px;
color:blue;
background:orange;
}
.ccc{
float:right;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
跨浏览器兼容
<script type="text/javascript">
window.onload = function(){
//var sheet = document.styleSheets;//得到的[object StyleSheetList]集合
var sheet = document.styleSheets[0];//得到第一个CSS样式表对象 //跨浏览器兼容获取rules
var rules = sheet.cssRules || sheet.rules;
alert(rules); //跨浏览器兼容删除某条规则 position这个参数表示第一条规则
function deleteRule(sheet,position){
if(sheet.deleteRule){
sheet.deleteRule(position);
}else if(sheet.removeRule){
sheet.removeRule(position);
}
} //跨浏览器兼容按参数添加一条规则
//第一个参数表示sheet（那个CSS文本对象）第二个参数是选择符，第三个参数表示css样式文本，第四个参数表示插入的位置
function insertRule(sheet,selectorText,cssText,position){
if(sheet.insertRule){
sheet.insertRule(selectorText+"{"+cssText+"}", position);
}else if(sheet.addRule){
sheet.addRule(selectorText,cssText,position);
}
}
} </script>
<style type="text/css">
.aaa{
font-size:20px;
color:red;
background:#ccc;
}
.bbb{
font-size:30px;
color:blue;
background:orange;
}
.ccc{
float:right;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
四、Rules 属性
通过 CSSRules 属性(非 IE)和 rules 属性(IE)，我们可以获得样式表的规则集合列表。这样我们就可以对每个样式进行具体的操作了。
<script type="text/javascript">
window.onload = function(){
var sheet = document.styleSheets[0]; //CSSStyleSheet
var rules = sheet.cssRules || sheet.rules; //CSSRuleList，样式表的规则集合列表
var rule = rules[0]; //CSSStyleRule，样式表第一个规则 alert(rule.cssText); //当前规则的样式文本
alert(rule.selectorText); //#box，样式的选择符
alert(rule.style.color); //red，得到具体样式值 //Chrome 浏览器在本地运行时会出现问题，rules 会变成 null，只要把它放到服务器上允许即可正常。
}
</script>
<style type="text/css">
.aaa{
font-size:20px;
color:red;
background:#ccc;
}
.bbb{
font-size:30px;
color:blue;
background:orange;
}
.ccc{
float:right;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
五、总结三种操作 CSS 的方法
第一种 ：通过style属性操作行内样式，可读可写；
第二种：通过计算后的样式操作行内、内联和链接，使用 getComputedStyle 或 currentStyle，可读不可写；
第三种 cssRules 或 rules，内联和链接可读可写。
JavaScript的DOM_StyleSheet操作内联或链接样式表的更多相关文章
- 内联式css样式，直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...
- JavaScript 获取和修改 内联样式
JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...
- [转]sql:除非另外还指定了 TOP 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询
执行sql语句: select * from ( select * from tab where ID>20 order by userID desc ) as a order by date ...
- [sql Server]除非另外还指定了TOP 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询和公用表表达式中无效
今天遇到一个奇怪的问题,项目突然要从mysql切换到sql server数据库,包含order by 子句的嵌套子查询报错. 示例:select top 10 name,age,sex from ( ...
- sql:除非另外还指定了 TOP 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询
执行sql语句: select * from ( select * from tab where ID>20 order by userID desc ) as a order by date ...
- ORDER BY 子句在视 图、内联函数、派生表、子查询和公用表表达式中无效
SQL语句: select * from (select distinct t2.issue,cashmoney from (select distinct issue from lot_gamepa ...
- javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍) (转载)
样式表有三种方式: 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. (也称作“内联样式”) 内部样式(internal Style Sheet):是写在 ...
- 除非另外还指定了 TOP 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询和公用表表达式中无效。
在 SELECT 后加 TOP 100 PERCENT .
- JavaScript的DOM操作获取元素的大小
通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...
随机推荐
- 转换json和字符串的一些方法
将字符串转换成json对象的方法: var str = '{"name1":"value1","name2":"value2&qu ...
- 如何将本地文件通过终端上传到linux服务器或从linux主机下载文件到本地
第一种方式: SecureCRT下上传文件只需在shell终端仿真器中输入命令“rz”,即可从弹出的对话框中选择本地磁盘上的文件,利用Zmodem上传到服务器当前路径下.下载文件只需在shell终端仿 ...
- C# 核心语法-反射（反射类型、方法、构造函数、属性，实现可配置可扩展，完成数据库访问类反射封装）
反射是.NET中的重要机制,通过反射,可以在运行时获得程序或程序集中每一个类型(包括类.结构.委托.接口和枚举等)的成员和成员的信息.有了反射,即可对每一个类型了如指掌.另外我还可以直接创建对象,即使 ...
- Jsp&Servlet入门级项目全程实录第1讲
惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 1.jdbc数据库连接(略) 2.登录表单 2.1设置内边距 <dir style="padding- ...
- mysql：名次排名 （并列与不并列）
http://www.cnblogs.com/zengguowang/p/5541431.html sql语句查询排名 思路:有点类似循环里面的自增一样,设置一个变量并赋予初始值,循环一次自增加1,从 ...
- Spring MVC 实现Excel的导入导出功能(2：Excel的导入优化和Excel的导出)
Excel的导入V2优化版 有些时候文件上传这一步骤由前端来处理,只将上传后的 URL 传输给后端(可以参考上一文中的图片上传功能),也就是导入请求中并不会直接处理 MultipartFile 对象, ...
- 使用webClient实现图片同步,异步下载
WebClient.DownloadFile 方法 将具有指定 URI 的资源下载到本地文件. 命名空间:System.Net 程序集:System(在 system.dll 中) 同步实现参考代码: ...
- cf1060C. Maximum Subrectangle(思维 枚举)
题意 题目链接 Sol 好好读题 => 送分题 不好好读题 => 送命题 开始想了\(30\)min数据结构发现根本不会做,重新读了一遍题发现是个傻逼题... \(C_{i, j} = a ...
- 测试canvas绘制旋转文字的性能
canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...
- js-小数计算问题
先上图: 什么情况? 原因:js采用二进制进行小数计算 先看十进制的小数转换为二进制的方法: 十进制数的整数位是二进制数的整数位,十进制数的小数位是二进制数的小数位 假如我们有小数111.4(10), ...