通过JS获取并修改元素的样式

2023-12-22 08:14| 来源: 网络整理| 查看: 265

文章目录前言行内元素样式获取：非行间样式元素获取：修改元素样式

前言

提示：在JavaScript原生操作中获取元素的样式，在实际操作是使用时比较频繁的一件事。因此，我查阅了网上的一些内容并将其总结收罗如下：

行内元素样式获取： //获取行间样式 var div = document.getElementById('div'); var width = div.style.width; alert(width);//200px

这种简单的方法只适用于获取元素的内联样式，并不能获取嵌入式和外联样式的值

非行间样式元素获取： #div{ width: 200px; } 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]; }

该方法可以获取元素当前显示的样式。 IE没有getComputedStyle()方法；谷歌、edge等其它浏览器，具有getComputedStyle()方法。

getComputedStyle()方法：如果获取的样式没有设置，则会获取到真实的值，而不是默认值；比如没有设置width，他不会获得auto，而是一个实际上的值。getComputedStyle()方法：而IE的话，不设置会默认auto；但是该方法不支持IE8及以下浏览器。两者均不能直接修改元素样式！！修改元素样式 //获取行间样式 var div = document.getElementById('div'); var width = div.style.width; alert(width);//200px div.style.width='300px'; width = div.style.width;//重新赋值 alert(width);//300px

【本文地址】

公司简介

联系我们