DOM操作样式表及其兼容性
DOM操作样式表的时候,存在很多浏览器兼容上的问题,测试的时候用的是Firefox 28.0、IE11、IE8、Chrome。测试的时候发现,不兼容问题基本上都是IE8和非IE浏览器之家的问题,很多IE8和非IE不兼容的方法在IE11中都已经兼容,而谷歌浏览器对IE8和Firefox中不兼容的方法都支持。
一、行内样式的操作
<div id="box" style=“float:right;font-size:30px;color:red;”>测试DIV</div>
var box = document.getElementById("box");//获得这个元素
一般的行内样式,可以直接通过style来修改或设置属性值
box.style.color = "green";//获得值
但是对于向 font-size 这种通过连字符连接起来的属性,则需要将中间的连字符去掉,,将后面的首字符大写
box.style.fontSize = "50px";
float 关键字处理,所以不能够直接处理,IE和非IE又存在兼容性的问题
alert(box.style.float); / /IE11返回的是right,但是最好不要这样做,
非IE:在前面添加一个css,并且将关键字的首字符改为大写即可。
box.style.cssFloat = “left”; //IE8返回的为null,IE11支持这种写法
IE浏览器:在关键字的前面添加一个style,然后将关键字的首字符进行大写。
box.style.styleFloat = "left";
跨浏览器的方法(此处做的是获得值,设置值是一样的)
var f = typeof box.style.cssFloat != "null" ? box.style.cssFloat : box.style.styleFloat;
//也可以这样:
var f = box.style.cssFloat || box.style.styleFloat; //IE8在执行前面后返回的是null,就会执行后面
二、获得计算后的样式
复杂样式是通过计算后加到元素上面的,上面直接通过box.style这种但一样试是获取不到属性的,需要通过计算样式来获取,
非IE提供的方法:
var style = window.getComputedStyle(box,null); //参数1是传递的一个元素Element,参数二是一个伪类,一般没有伪类就写null
IE提供的方法
var style = box.currentedStyle;
做兼容的方法:PS:IE中window.getComputedStyle(box,null);会报错,但是window.getComputedStyle不会
alert(typeof box.currentStyle); // IE:object Firefox:undefined
alert(typeof window.getComputedStyle); //function
兼容方法1:
var style = typeof box.currentStyle == "undefined" ? window.getComputedStyle(box,null) : box.currentedStyle;
兼容方法二:PS:因为用或预算做兼容的时候,需要前面返回为null或者是undefined时才会执行后面,故先做一个三元运算
var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentedStyle;
PS:计算的样式只是能够获取样式属性值,但是不能够修改值。之所以可以获取内链和链接,
因为不管你在那里设置CSS,最终会驻留在浏览器的计算样式里
对于向border这种复合样式,是不能够直接通过 style.border来获取.但是可以直接获取它计算后的单个属性的值:alert(style.borderTopColor)
三、操作样式表
通过ID和通过class来操作,class的属性样式是可以叠加的,相同的就覆盖,不同的就进行叠加,共同作用
在开发过程中不要改变ID,这样会照成灾难性的后果,修改了ID后,会附带的将这个ID对应的样式作用到这个元素上面
var box = document.getElementById("box");
box.id = 'pox'; //修改ID 的时候会附带的将这个ID对应的样式表给添加进来
box.style.color="blue";
var pox = document.getElementById("pox");
pox.style.background="yellow";
box.style.fontSize = "50px"; //这两个ID来改变样式,同时起作用
通过class来操作样式表,通过元素的className来操作
box.className = "aaa"; //清除之前所有的样式,然后再添加一个样式 aaa
在某些情况下个元素添加样式和删除样式,是需要先判断元素是否具有这个样式,并且判断必须是精确判断
精确判断元素中是否具有某个样式,返回bool值
function hasClass(element,cName){
//"aaa bbb ccc ddd";
var reg = new RegExp("(\\s|^)"+cName+"(\\s|$)");//传递过来样式是一个变量,故要转换成字符串,
//样式可能是在开头,也可能是在中间,也可能是在结尾,
//样式的匹配查找必须要精确匹配,如果不精确 aaa 和 aa 也可以匹配,所以添加了两头的分组。 return !!element.className.match(reg); //将匹配结果用bool值返回
//match 函数是正则表达式里面的匹配函数,返回匹配成功的字符串,没有匹配成功返回为null
}
增加样式函数 传递一个元素以及要增加的样式表
function addClass(element,cName){
//需要先判断这个元素是否已经存在传递过来的这个样式
if(!hasClass(element,cName)){ //如果不存在就添加
element.className += " "+cName; //添加一个空格隔开,若不隔开,结果将由 aaa bbb 变成 aaabbb,
}
}
移除元素中的某一个样式值
function removeClass(element,cName){
if(hasClass(element,cName)){ //存在就去掉
//替换仅仅是替换的字符串,故需要从新赋值
element.className = element.className.replace(new RegExp("(\\s|^)"+cName+"(\\s|$)")," ");
//在匹配的时候是去掉了空白的,故换掉的时候添加一个空白
}
}
四、外联试 <link> 样式的操作
PS:Chrome 浏览器在本地运行时会出现问题,rules 会变成 null,只要把它放到服务器上运行即可正常
获取内联<style>或链接<link>样式表
var link = document.getElementsByTagName("link")[0]; //object HTMLLinkElement
var style = document.getElementsByTagName("style")[0]; //HTMLStyleElement
然后通过这两个变量获得样式表sheet
火狐和IE11(新版本的IE支持的方法)
var steet = link.sheet; //object CSSStyleSheet
IE8提供的方法,新版本的IE已经不支持这个方法
var sheet2 = link1.styleSheet; //IE11是undefined
//兼容方法:
var steet = link.styleSheet || link.sheet;
//另外还有一个方法,能够兼容所有的浏览器
var sheet = document.styleSheet[0]; //本身获取的是一个sheet集合,要操作某一个样式表就用数组的方式获得
样式表的几个简单属性
sheet.disabled; //表示样式表是否可用,如果设置为true,这样式表不起作用,默认的是为false
sheet.href; //如果是通过<link>包含的,则样式表为 URL,否则为 null
sheet.type; //样式表类型字符串
样式的规则 就是,一群样式的集合表示一个规则,一个类 aaa的花括号中包含的代码就是一个规则
获得规则集合(存在浏览器的不兼容问题):
var rules = sheet.cssRules; //非IE浏览器以及新版本的IE(IE11)支持
var rules = sheet.rules; //IE8提供的方法,
故要获得样式集合就必须做一个兼容方法:
var rules = sheet.cssRules || sheet.rules;
CSSStyleRules 可以使用的属性
var txt = rules[0].ceeText; //返回的是当前第一个规则的所有css代码
var secTxt = rules[0].selectorText; //返回的是当前这个规则前面的选择符文本, #box 或者说是 .aaa
var box = rules[0].parentStyleSheet; //object CSSStyleSheet 当前规则的样式表,IE8不支持
var style = rules[0].style; //返回 CSSStyleDeclaration 对象,可以获取和设置样式
var type = rules[0].type; //表示规则的常量值,对于样式规则,值为 1,IE8 不支持
//通过属性style可以获取和设置样式
alert(rules[0].style.color); //red
rules[0].style.cssFloat = "right"; //IE8: rules[0].style.styleFloat = "right";
插入规则,存在浏览器的兼容性问题,并且在测试的时候发现,
插入的规则的选择符文本只能够是body,不能为其它,插入的规则会马上作用与当前的html页面
非IE(IE11支持这种写法)
sheet.insertRule("body {float:right}",0); //从第0个位置插入一条规则body,注意花括号
IE8 (IE11同样支持这种写法)
sheet.addRule("body","float:right",0); //从弟0个位置插入一条规则body,规则题不需要花括号
兼容方法
//alert(typeof sheet.insertRule); //IE:function Firefox:function
//alert(typeof sheet.addRule); //IE:function Firefox:undefined
function insertRule(sheet,selectorText,cssText,position){ //要添加的样式表,规则选择符,规则文本,添加的位置
if(sheet.insertRule){ //如果是IE8,undefined经过转换后为false
sheet.insertRule(selectorText+"{"+cssText+"}",position);
}else if(sheet.addRule){ //也可以用typeof来做判断
sheet.addRule(selectorText,cssText,position);
}
}
删除规则,也存在浏览器的兼容性问题,
非IE,IE高版本也支持的方法
sheet.deleteRule(0); //删除样式表中的第0个规则,这条语句作用后,所有加载了本规则的所有元素的CSS代码失去作用
IE8
sheet.removeRule(0); //删除样式表中的第0个规则
兼容方法
//alert(typeof sheet.removeRule); //IE:function Firefox:undefined
//alert(typeof sheet.deleteRule); //IE:function Firefox:function
function deleteRule(sheet,position){ //操作的样式表,删除的第几个规则
if(sheet.deleteRule){
sheet.deleteRule(position);
}else if(sheet.removeRule){
sheet.removeRule(position);
}
}
DOM操作样式表及其兼容性的更多相关文章
- JavaScript编程:使用DOM操作样式表
6.使用DOM操作样式表: 操纵元素的Style样式属性: background-color:style.backgroundColor color:style.col ...
- DOM系列---DOM操作样式
发文不易,若转载传播,请亲注明出处,谢谢! 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有 ...
- 第一百一十六节,JavaScript,DOM操作样式
JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表
操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...
- JS:操作样式表3:内联和外链样式
var box = document.getElementById("box"); box.style.属性;只能读取修改行内样式. //访问元素样式2,对外链样式表进行操作 do ...
- 自定义类StyleSheet跨浏览器操作样式表中的规则
这是群里网友地瓜提供的一个类,不熟悉样式表对象和样式规则对象的浏览器差异的可以看看 /** * Stylesheet.js: utility methods for scripting CSS sty ...
- JS:操作样式表1:行内样式
//访问元素样式1, stye属性只对行内样式有用 var box = document.getElementById("box"); // alert(box.style.col ...
- JS:操作样式表2 :用JS实现添加和删除一个类名的功能(addClass()和removeClass())
var box = document.getElementById("box"); box.id = "pox"; 将id = “box”,改为id = “po ...
- JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)
层叠样式 表和动态HTML 层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准. 使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...
随机推荐
- iOS自动布局一
Align: Pin:
- webform网站相关数据控件和其他
一.asp:Repeater <div class="bd"> <ul> <asp:Repeater ID="rept_slide" ...
- 怎么做QQ、微信等消息气泡
主XML: <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android ...
- php框架学习的步骤
一,选择一个合适的php框架 在国内,使用zf,ci和tp框架的人比较多,新手可以从中选一个去学习,新手不建议一开始就去学习zf,功力还不够深,学习zf会让你更迷茫. 二,选定一个php框架之后,如何 ...
- jquery 匹配select下拉框与列表框
今天工作中用到 GrapyCity 的 wijmo ui 控件. 要给系统中所有类型的控件加统一样式 用法 $("input [type='text']").wijtext(); ...
- 在EF的code frist下写稳健的权限管理系统:MVC过滤拦截,权限核心(五)
[AttributeUsage(AttributeTargets.Method | AttributeTargets.Class, Inherited = true, AllowMultiple = ...
- [terry笔记]IMPDP报错ORA-39083 Object type TYPE failed to create ORA-02304
今天在使用impdp导入的时候(同一数据库中转换schema),遇到了 ORA-39083: Object type TYPE failed to create with error: ORA-023 ...
- Python核心编程--学习笔记--2--Python起步(下)
16 文件和内建函数open(),file() 打开文件: fobj = open(filename, 'r') for eachLine in fobj: print eachLine, #由于每行 ...
- Android Studio添加aar包依赖
1.将aar包考入需要依赖的模块的libs目录下 2.在需要依赖的模块的build.gradle中添加如下内容: dependencies { compile(name:'aar包名不带扩展名', e ...
- Java 需要记得、了解的关键词 (Java 学习中的小记录)
Java 需要记得.了解的关键词 (Java 学习中的小记录) 作者:王可利(Star·星星) 总结:本次随笔,仅且拿来平时翻阅记忆用