js基础_66、获取元素的样式
获取元素的样式currentStyle
就是获取元素的当前显示的样式，如果要获取到元素没有设置该样式，则获取它的默认值，比如说，当前元素没有设置background-color样式，你用这个属性获取的就是默认值：transparent(透明的)。
它和style的区别就是它可以获取元素当前正在使用的样式，而style只能获取内联样式。
currentStyle只有IE浏览器支持，其它浏览器都不支持。
getComputedStyle()
在其它的浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式，这个方法是window的方法，可以直接使用。需要两个参数：第一个：要获取样式的元素。
第二个，可以传递一个伪元素，一般都传null。
这个方法会返回一个对象，对象中封装了当前元素对应的样式。
可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值，比如：没有设置width，他不会获取到auto，而是一个长度。但是该方法不支持IE8及以下的浏览器。
通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#mydiv{
width:100px;
height:100px;
background-color: red ;
}
</style>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn1");
var div=document.getElementById("mydiv");
btn.onclick=function(){
div.style.width="300px";
div.style.height="300px";
div.style.backgroundColor="yellow";
};
var btn2=document.getElementById("btn2");
btn2.onclick=function(){
var h=getComputedStyle(div)
alert(h.width);
};
};
var getStyle=function(obj,name){
if(window.getComputedStyle){//加一个window它会去window里面找该属性，没有找到就返回一个false
//不加window它会先去这个方法找getComputedStyle变量，找不到window也找不到，就会报错，导致判断无意义。
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj)[name];
}
//IE8的方法，没有getComputedStyle()方法
return obj.currentStyle[name]
}
</script>
</head>
<body>
<div id='mydiv'></div>
<button id='btn1'>改变样式</button>
<button id='btn2'>读取样式</button>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！