15 获取运行时的style 属性值

来源：互联网发布：如何提高免疫力知乎编辑：程序博客网时间：2024/04/29 12:11

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14操作对象</title>
<style>
div{
height: 300px;
width: 300px;
border-bottom: 1px solid pink;
}
#test1{
background: red;
}
#test2{
background: yellow;
}
</style>
</head>
<body>
<div id="test1" onclick='t();'></div>
</body>
<script>
//indexof 查找字符串出现找不到返回-1
//getComputedStyle() 第二参伪类一般填null
//currenstyle 或是否能获取obj的属性
//currenstyle 或 getComputedStyle()只能读取值不能修改值
function getstyle(obj,src){
return obj.currentStyle ? obj.currentStyle[src]:getComputedStyle(obj, null)[src];
}

function t() {
var a = document.getElementsByTagName("div")[0];
if (a.id.indexOf('test1')>=0) {
a.id = 'test2';
} else {
a.id = 'test1';
}

a.style.height = parseInt(getstyle(a,'height')) + 5 + 'px';
a.style.width = parseInt(getstyle(a,'width')) + 5 + 'px';
a.style.borderBottomWidth = parseInt(getstyle(a,'borderBottomWidth'))+1+'px';

}
</script>

</html>

----------------------------------------------------------------------------------------------------

0 0