<body style="height: 2000px;">
<div class="c f" onclick="fn()" style="border:10px solid #ccc;height: 80px;color:red;background:rebeccapurple"> 我是div</div>
<script>
let div = documentquerySelector('div');
/ 通过style在行内样式上获取样式 /
/ 使用style获取样式 写的什么 就能获取到什么
不会转成rgb 和 出现其他的样式 /
consolelog('style',divstylecolor )
consolelog('style',divstylebackground )
/ style是获取不到在内部样式上或者外部样式上的样式的 /
// consolelog( divstylecolor )
// / font-size js中要是用驼峰的方式获取 /
// consolelog( divstylefontSize )
/ 使用windowgetComputedStyle可以获取行内、内部、外部的所有样式
但是 获得color是rbg格式的，获取的background是所有属性 /
consolelog( windowgetComputedStyle(div,null)color )
consolelog( windowgetComputedStyle(div,null)fontSize )
consolelog( windowgetComputedStyle(div,null)background )
consolelog( windowgetComputedStyle(div,null)height )
// documentonscroll = function (){
// consolelog(documentdocumentElementscrollTop);
// }
</script>
通过 windowgetComputedStyle 获取所有经过浏览器计算的样式(只要的你的元素在浏览器加载的时候渲染过,能够在页面中展示,那么当前元素的所有的样式都是经过浏览器计算的,哪怕你没有写)
windowgetComputedStyle(要 *** 作的元素,元素的伪类(JS一般不用->null)) ->这个获取到的结果是一个对象数据类型的值(CSSStyleDeclaration内置类的一个实例),里面包含了我们所有经过浏览器计算过的样式属性名和属性值
样式的引用形式大致可分为以下四种：
一、行间样式，即直接加在标签上的样式 例:<div style="width:50px;"></div>
二、内联样式 即用<style> </style>标签括起来写在页面中的样式
三、外联样式：即将样式单独放到一个文件夹中，然后用link标签引入页面的形式
四，导入样式，即将样式，按模块划分或其它的分法分别放在不同的css文件中，然后用@导入到其它样式中 。此方法建议不要用，因为效率不是特别高
前三种的优先级为： 行间 > 内联 >外联
用For Each myStyle In ActiveDocumentStyles遍历所有样式对象
用myStyleNameLocal来取得每个样式对象的名称
Sub a()
Dim str As String
For Each c In ThisDocumentCharacters
If InStr(str, cFontName) = 0 And Len(cFontName) > 0 Then
str = str & cFontName & ","
End If
<a href=">
定义一个id="flower"的div元素 并设置如上样式，目标就是通过javascript来获取样式的最终属性 ；
<div id="flower" ></div>
getStyle函数:
这里用到了三个原型扩展
Stringprototypecapitalize 这个方法是让字符串首字母大写
Arrayprototypecontains 判断数组中是否有指定成员
Stringprototypecamelize 这个是让"font-size" 字符串转换成 "fontSize" 这样的格式用来获取样式。
以上就是关于js之获取元素样式全部的内容，包括:js之获取元素样式、如何获取某个元素定义的全部样式、css样式引用的方式并举例说明等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）