wanan
1、获取行间样式
当我们获取页面样式时，可以通过以下方式，但是以下方式只能获取行内样式，而无法获取行外或者外联样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dom—获取当前样式</title>
<style>
#Div1{
background-color: red;
height: 300px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var odiv1=document.getElementById("Div1");
</script>
</head>
<body>
<div id="Div1" style="width: 300px; "></div>
</body>
</html>
2、获取当前页面所有的样式
要想获取页面所有的样式，可以通过以下的语法来实现，但是此语法对于IE浏览器内核不兼容，适用于火狐/谷歌/Safari。
通过下述方式，获取当前所有的有效样式，避免行外的或者外联样式无法获取的问题
getComputedStyle( 元素节点 )[ 获取样式类型 ];
【注】针对样式优先级的问题
比如写了两个一样的样式，因为有优先级，所以他会只获取有效的那个
2.外链的样式也是不能获取的
3.这个效果IE浏览器是不支持的，支持火狐/谷歌/Safari
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dom—获取当前样式</title>
<style>
#Div1{
background-color: red;
height: 300px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var odiv1=document.getElementById("Div1");
alert(getComputedStyle(odiv1)["height"]);输出外联样式属性“300px” IE浏览器不输出
</script>
</head>
<body>
<div id="Div1" style="width: 300px; "></div>
</body>
</html>
3、IE浏览器获取当前样式
IE浏览器获取当前样式的方法
元素节点.currentStyle[ 获取样式类型 ];
通过一个三目运算符完成
function getStyle(elem,attr){
elem获取谁的样式；attr获取哪个样式
return elem.currentStyle ? elem.currentStyle[arr] : getComputedStyle(elem)[arr]
通过判断currenStyle是否存在
若存在，就代表是IE浏览器，就需要使用current来获取
若不存在，就使用Computed普通获取方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dom—获取当前样式</title>
<style>
#Div1{
background-color: red;
height: 300px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var odiv1=document.getElementById("Div1");
alert(getStyle(odiv1,"width"));
function getStyle(elem,attr){
return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem)[attr];
}
}
</script>
</head>
<body>
<div id="Div1" style="width: 300px; "></div>
</body>
</html>
|