您的位置：首页 > Web前端 > JavaScript

JavaScript-DOM-获取样式

2016-03-01 23:45 627 查看

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<script>
function getStyle(){
var d1 = document.getElementById("d1");
/*d1.style.backgroundColor="green";*/
var width = d1.style.width;
console.log(width);
}

function getStyle1(){
var d2 = document.getElementById("d2");
//只能获取 内联样式
/**var width = d2.style.width;
var height = d2.style.height;**/

//获取经过计算后的样式(内、外部样式表中的值)
/*var width = document.defaultView.getComputedStyle(d2).width;
var height = document.defaultView.getComputedStyle(d2).height;*/

//判断浏览器是否支持 currentStyle
if(d2.currentStyle){
//IE低版本 中 获取 计算后的样式值
var width = d2.currentStyle.width;
var height = d2.currentStyle.height;
//window.alert("width:"+width+",height:"+height);
window.alert(width + ":" + height);
}else{
var width = document.defaultView.getComputedStyle(d2).width;
var height = document.defaultView.getComputedStyle(d2).height;
window.alert(width + ":" + height);
}
}
</script>
<style>
#d2{
width:200px;
height:200px;
background-color:pink;
}
#d2{
width:400px;
}

</style>
</head>

<body>
<div id="d1" style="width:100px;height:100px;background-color:red;"></div>
<button onclick="getStyle()">获取样式</button>
<div id="d2">

</div>
<button onclick="getStyle1()">获取样式</button>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航