DOM - 获取当前样式和IE兼容
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
#div1{
background-color: red;
}
</style>
</head>
<body>
<div id="div1" style="width:300px; height:300px; "></div>
</body>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
alert(oDiv.style.height);
}
</script>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
alert(oDiv.style.backgroundColor);
}
</script>
<style>
#div1{
background-color: red;
height:300px;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
alert(oDiv.style.height);
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
#div1{
background-color: red;
height:300px;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
//alert(oDiv.style.height);
alert(getComputedStyle(oDiv)["height"]);
}
</script>
</head>
<body>
<div id="div1" style="width:300px; "></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
#div1{
background-color: red;
height:300px;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
//alert(oDiv.style.height);
//alert(getComputedStyle(oDiv)["height"]);
alert(getStyle(oDiv,"height"));
}
//获取当前样式的兼容:
function getStyle(elem,attr){
//elem获取谁的样式;attr获取哪个样式
return elem.currentStyle ? elem.currentStyle[arrt] : getComputedStyle(elem)[arrt];
/*
这里返回先看currenStyle是否存在
若存在,就代表是IE浏览器,就需要使用current来获取
若不存在,就使用Computed普通获取方式
*/
}
</script>
</head>
<body>
<div id="div1" style="width:300px; "></div>
</body>
</html>
赞 (0)