JS_js获取元素样式style属性值，js获取元素css样式，getComputedStyle

小灰灰 2022-10-15 08:57 264阅读 0赞

getComputedStyle(“元素”, “伪类”)

<div id="caseroul" style="width: 500px;"></div>

# 获取单个属性值 #

getComputedStyle(document.getElementById('caseroul'),null).getPropertyValue('width'); //500px
    getComputedStyle(document.getElementById('caseroul'),null).width; //500px

# 获取全部属性值 #

getComputedStyle(document.getElementById('caseroul'),null)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]

# 处理后的数据 #

<style> .button { height: 2em; border: 0; border-radius: .2em; background-color: #34538b; color: #fff; font-size: 12px; font-weight: bold; } </style>
    <input type="button" id="button" class="button" value="点击我，显示我" />
    <p id="detail"></p>
    <script> var oButton = document.getElementById("button"), oDetail = document.getElementById("detail"); if (oButton && oDetail) { oButton.onclick = function() { var oStyle = this.currentStyle? this.currentStyle : window.getComputedStyle(this, false); var key, html = '本按钮CSS属性名和属性值依次为('+ !!this.currentStyle +')：'; if (typeof oStyle === "object") { for (key in oStyle) { if (/^[a-z]/i.test(key) && oStyle[key]) { html = html + '' + key + ":" + oStyle[key] + ''; } } } else { html += '无法获取CSS样式！'; } oDetail.innerHTML = html; }; } </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20221014/302d098ffe124b5186d0292e585ae876.png

发表评论取消回复

表情：

评论列表（有 0 条评论，264人围观）

还没有评论，来说两句吧...

相关阅读

相关 window.getComputedStyle 获取伪元素的style

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

雨点打透心脏的1/2处/ 2023年07月19日 12:11/ 0 赞/ 10 阅读

相关 js获取元素样式

js获取当前元素样式时，除了使用element.style.样式名，还有其他两个方法。 1.currentStyle,用于获取当前元素的样式语法：元素.current

叁歲伎倆/ 2023年02月25日 02:08/ 0 赞/ 34 阅读

相关【js】jQuery获取和修改元素的内容、属性、css样式

1.获取和修改元素内容我们可以使用html()方法获取元素内容和修改内容，类似于元素js的innerHTMl 当html()方法不传参数的时候即是获取该元素的内容，

﹏ヽ暗。殇╰゛Y/ 2022年11月27日 00:45/ 0 赞/ 257 阅读

相关 JS_js获取元素样式style属性值，js获取元素css样式，getComputedStyle

getComputedStyle(“元素”, “伪类”) <div id="caseroul" style="width: 500px;"></div> 获取单个

小灰灰/ 2022年10月15日 08:57/ 0 赞/ 265 阅读

相关获取元素CSS值之getComputedStyle方法

获取元素CSS值之getComputedStyle方法熟悉![Image 1][] 这篇文章发布于 2012年05月8日，星期二，23:31，归类于 [js实例][js]

拼搏现实的明天。/ 2022年06月11日 03:52/ 0 赞/ 211 阅读

相关 js获取css值的方法：style、getComputedStyle和currentStyle

js 获取 html元素的样式有三种方式：style、getComputedStyle 和 currentStyle等。区别在于：（1）style 只能获取行间样

梦里梦外;/ 2022年06月10日 01:37/ 0 赞/ 235 阅读

相关 js 获取 html元素的样式有三种方式：style、getComputedStyle 和 currentStyle等

[js][] 获取 html元素的样式有三种方式：style、getComputedStyle 和 currentStyle等。区别在于：（1）style 只能获取

逃离我推掉我的手/ 2022年06月10日 01:37/ 0 赞/ 804 阅读

相关 js基础获取元素样式

在学习DOM的时候就看到通过三种方法来获取元素样式值。一、元素.style 只能获取行内样式，就是标签里面写的style样式。无法获取到定义在<style

墨蓝/ 2022年04月18日 03:27/ 0 赞/ 295 阅读

相关 JS基础-获取当前元素的样式&&其他样式相关的属性

1.利用currentStyle方法来获取当前元素的样式 <!doctype html> <html> <head> <meta charse

约定不等于承诺〃/ 2022年03月22日 09:47/ 0 赞/ 465 阅读

相关原生js获取元素样式

原生js获取元素样式最终版： function getStyle(ele) { var style = null;

红太狼/ 2020年06月22日 16:08/ 0 赞/ 896 阅读