样式

1.访问元素样式

js和html中的style是CSSStyleDeclaration实例
float属性名IE用styleFloat,DOM2用cssFloat
混杂模式可以识别不带单位的，标准模式必须加单位

(1) DOM样式属性和方法

(2) 计算的样式
getComputedStyle() 包括层叠来的样式
border等综合属性不会返回值 chrome可以返回
alert(computedStyle.backgroundColor); //火狐rgb ie:red

//ie9+其它
var computedStyle = document.defaultView.getComputedStyle(mydiv, null);
//ie8-
var computedStyle = mydiv.currentStyle;
var computedStyle = mydiv.currentStyle || document.defaultView.getComputedStyle(mydiv, null);

2.操作样式表

stylesheet 只读接口

//document.styleSheets 得到样式表集合
//element.styleSheet | sheet
单个样式表
var sheet = null;
for (var i=0, len = document.styleSheets.length; i < len; i++) {
sheet = document.styleSheets[i];
alert(sheet.href);
//link包含的 返回href
}
//得到单个元素样式表
function getStyleSheet(element) {
return element.sheet || element.styleSheet;
}

 //其它
<link rel="stylesheet" />
 //ie
<link rel="alternate stylesheet" />

(1) css规则
样式表的每一条 CSSStyleRule对象

【注】cssText 和 style.cssText : 前者包含选择文本和花括号，后者只包含样式信息
前者只读 后者可重写

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules; //其它域ie
var rule = rules[0];
//可使用以上属性验证
//跨浏览器添加规则
function insertRule(sheet, selectorText, cssText, position){
if (sheet.insertRule) {
sheet.insertRule(selectorText + "{" + cssText + "}", position);
}else if (sheet.addRule) {
sheet.addRule(selectorText, cssText, position);
}
}
//调用
insertRule(document.styleSheets[0], "body", "background-color: red", 0);
//跨浏览器删除
function deleteRule(sheet, index){
if (sheet.deleteRule) {
//dom
sheet.deleteRule(index);
}else if (sheet.removeRule) {
//ie
sheet.removeRule(index);
}
}
deleteRule(sheet, 0);

最后

以上就是大气香氛为你收集整理的DOM样式样式的全部内容，希望文章能够帮你解决DOM样式样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。