|
样式分类：
有3种：
1、外部样式(external style
sheet):如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写
在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文
件。
2、内部样式(internal style
sheet):是写在HTML的<head></head>里面的，内部样式只对所在的网页
有效。
3、内嵌样式(inline style):是写在Tag里面的，内嵌样式只对所有的Tag有效。
样式的优先级：
多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是
使多重样式的情况。
一般情况下，优先级如下：
（外部样式）External style sheet <（内部样式）Internal style
sheet <（内联样式）Inline
style
有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
示例如下：
<head>
<style type="text/css">
h3{color:green;}
</style>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css"
href="style.css"/>
<!-- 设置：h3{color:blue;} -->
</head>
<body>
<h3>测试！</h3>
</body>
说明：
document.styleSheets[0].rules[0].style 这个
styleSheets[0]数组的下标是代表本页的第N个
CSS样式表,它的下级rules[0]的数组下标表示的则是这个样式表中的第N个样式。
rules 和 cssRules 的计数方法也是不一样的！rules 是第几个选择器；cssRules 是第几条规则。
分别用 IE 和 firefox 运行下面的代码可知。
<style
type="text/css">
a,div,p {color:red}
h5 {color:blue}
</style>
<script>
if(document.styleSheets[0].cssRules){
alert(document.styleSheets[0].cssRules[3].selectorText+":"+document.styleSheets
[0].cssRules[1].style.cssText)
}else{
alert(document.styleSheets[0].rules[3].selectorText+":"+document.styleSheets[0].rules
[1].style.cssText)
}
</script>
js修改内部样式：
在IE里：
document.styleSheets[0].rules[0].style.display = "inline";
在firefox里：
document.styleSheets[0].cssRules[0].style.display = "inline";
可以用一个函数来搜索特定名字的style对象：
function getstyle(sname) {
for (var i=0;i<document.styleSheets.length;i++)
{
var rules;
if (document.styleSheets[i].cssRules) {
rules = document.styleSheets[i].cssRules;
} else {
rules = document.styleSheets[i].rules;
}
for (var j=0;j<rules.length;j++) {
if (rules[j].selectorText == sname) {
//selectorText 属性的作用是对一个选择的地址进行替换.意思应该是获取RULES[J]的CLASSNAME.
return rules[j].style;
}
}
}
} 然后只需：getstyle(".orig").display="inline";就行了
js获取样式：
var mydiv =
document.getElementByIdx_x('mydiv');//拿到id为mydiv的对象
if(mydiv.currentStyle) {
//针对ie的
var width = mydiv.currentStyle['width'];
//拿到[width]的样式
alert('ie:' + width);
} else if(window.getComputedStyle) {
//针对Firefox的
var width = window.getComputedStyle(mydiv , null)['width'];
alert('firefox:' + width);
}
通用方法：
function getStyle(id, css) {
var style = document.defaultView ?
document.defaultView.getComputedStyle(document.getElementByIdx_x(id),
null)[css]//FF or Other
: document.getElementByIdx_x(id).currentStyle[css];
//IE
//注意这里的[css]，如['width']
}
|
