style currentStyle getComputedStyle

最新推荐文章于 2024-07-08 18:01:35 发布

freeshineshao

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量323

点赞数

分类专栏：技术类 HTMl javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/u014493388/article/details/46332253

版权

技术类同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTMl

1 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

}

</script>

IE Opera 支持currentStyle

firefox Safari支持getComputedStyle

为了让浏览器兼容

obj.currentStyle? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr]

例子：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Screen</title>
<style type="text/css">
.test2{
width:100px;
height:200px;
background-color:green;
border-bottom:1px solid black;
}
.test1{
width:100px;
height:200px;
background-color:red;
border-bottom:1px solid black;
}
</style>
<script type="text/javascript">
function getStyle(obj,attr){
return obj.currentStyle? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];
}
function t(){
var div=s=document.getElementsByTagName('div')[0];
if(div.className.indexOf('test1')>=0){
div.className='test2'
}else{
div.className='test1'
}
div.style.width=parseInt(getStyle(div,'width'))+5+"px";
div.style.height=parseInt(getStyle(div,'height'))+5+"px";
div.style.borderBottomWidth=parseInt(getStyle(div,'borderBottomWidth'))+1+"px";
//alert(document.getElementById('div1').style.width);
}
</script>
</head>
<body>
<div class="test1" οnclick="t()" id="div1">
点击div，使其背景色红绿jiaoti
款高增加5px
下边框增粗1px
</div>
</body>
</html>

freeshineshao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
style currentStyle getComputedStyle

function getStyle(obj,attr){return obj.currentStyle? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];}IE Opera 支持currentStylefirefox Safari支持getComputedStyle为了让浏览器兼容obj.
复制链接

扫一扫