通过JS获取并修改元素的样式
通过JS获取内联式、嵌入式和外链式样式，以及修改
·
前言
提示：在JavaScript原生操作中获取元素的样式，在实际操作是使用时比较频繁的一件事。因此，我查阅了网上的一些内容并将其总结收罗如下：
行内元素样式获取：
<body>
<div id="div" style="width:200px;height:200px;border:3px solid cyan;"></div>
</body>
<script>
//获取行间样式
var div = document.getElementById('div');
var width = div.style.width;
alert(width);//200px
</script>
这种简单的方法只适用于获取元素的内联样式，并不能获取嵌入式和外联样式的值
非行间样式元素获取：
<head>
<style>
#div{
width: 200px;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
<script>
var div = document.getElementById('div');
alert(getStyle(div, width));
//兼容性__方法封装：
function getStyle(obj,name){
//获取属性可以通过 ' . '，也可以通过中括号;这里' . '不适合，中括号才适合
//方式一：
if (obj.currentStyle) {
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
//方式二：
window.getComputedStyle?getComputedStyle(obj,null)[name] : obj.currentStyle[name];
}
</script>
该方法可以获取元素当前显示的样式。
IE没有getComputedStyle()方法；谷歌、edge等其它浏览器，具有getComputedStyle()方法。
getComputedStyle()方法：
如果获取的样式没有设置，则会获取到真实的值，而不是默认值；
比如没有设置width，他不会获得auto，而是一个实际上的值。getComputedStyle()方法：
而IE的话，不设置会默认auto；
但是该方法不支持IE8及以下浏览器。- 两者均不能直接修改元素样式！！
修改元素样式
<body>
<div id="div" style="width:200px;"></div>
</body>
<script>
//获取行间样式
var div = document.getElementById('div');
var width = div.style.width;
alert(width);//200px
div.style.width='300px';
width = div.style.width;//重新赋值
alert(width);//300px
</script>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)