JavaScript获取元素的样式

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： JS

作者：黎耀杰

撰写时间：2022/3/28

1、通过style属性获取/修改样式

元素.style.样式名=样式值 读取方式：元素.style.样式名

通过style属性设置和读取的都是内联样式

案例：

HTML

CSS

JS获取元素内联样式属性

JS修改元素的样式：元素.style.样式名=样式值

读取方式：元素.style.样式名

通过style属性设置和读取的都是内联样式

1. 获取元素的当前显示样式

语法：元素.currentStyle.属性名 或 元素.currentStyle[属性名],currentStyle可以用来读取当前元素正在 显示的样式，如果当前元素没有设置该样式，则获取它的默认值。例如：如果没有设置width，获取到的 值为auto

在其他浏览器中可以使用

getComputedStyle()这个方法获取当前元素的显示样式，这个方法是window的方法，可以直接使用

参数说明：

1.需要获取样式的元素

2.可以传递一个伪元素，一般都传null

说明：该方法返回一个对象，对象中封装了当前元素对应的样式

var obj=getComputedStyle(element,null);//该方法的使用说明获取元素显示样式：obj.属性名 或则 obj["属性名"]，如果获取的样式没有设置，则会获取到真实的值，而不是默认值。例如：如果没有设置width，获取到的值为1200px(元素实际的值)。

注意：！！！该方法不支持IE8及以下的浏览器

定义一个函数，用来获取指定元素的当前样式

参数：

1. element 要获取样式元素
2. nane 需要获取的样式名

getComputedStyle()方法与currentStyle属性都是只读的属性，不能修改属性，如果需要修改属性 的值，只能使用style属性

这是我所学到的JavaScript获取元素的样式，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！