原生js获取元素的样式style属性值

是这样的，一开始需要获取某一个元素的 left 值，我就用 elestyleleft 去获取了（基础不扎实还好意思来丢人），然后居然返回的是空。

好吧，追本溯源，问题的根源以及区别就在这里了。

所以，我那样是获取不到某一个元素的一个其他方式设置的样式属性值的，所以我就打算谷歌一下别的方法了。

特点：

- 只可读，但是可以读取所有的样式属性值。但是不能通过该方法去设置样式属性值。

currentStyle 获取的是一个元素的所有的样式属性值，这一点功能是与 getComputedStyle() 一样的，但是在获取某一个具体的属性的时候，可以结合 getAttribute 来实现。

和 getComputedStyle 方法不同的是，currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性，那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值，就必须将属性名转为驼峰形式。 ( 感谢这篇文章。 )

关于 getComputedStyle 返回的值，具体查看这里。

不管你最初定义的样式是什么，涉及到宽度高度之类的，返回的都是最后实际使用的宽度和高度。

关于 elestyle 的返回值，是和定义的样式的值相等的，如果设置为auto，就直接返回auto。

然后是元素的高宽，对于一个没有设定高宽的元素而言，在 IE678 下使用 getPropertyValue("width|height") 得到的是 auto 。而标准浏览器会直接返回它的 px 值，当然我们希望在 IE 下也返回 px 值。

这里的 HACK 方法是使用 elementgetBoundingClientRect() 方法。

elementgetBoundingClientRect() -- 可以获得元素四个点相对于文档视图左上角的值 top、left、bottom、right ，通过计算就可以容易地获得准确的元素大小。

参考链接 chokcoco的博客园

javascript的style属性只能获取内联样式，对于外部样式和嵌入式样式需要用currentStyle属性。但是，currentStyle在FIrefox和Chrome下不支持，需要使用如下兼容性代码

HTMLElementprototype__defineGetter__("currentStyle", function () { 

    return thisownerDocumentdefaultViewgetComputedStyle(this, null); 

});

接下来就可以直接使用currentStyle属性来获取元素的样式了，下面实例演示获取页面body的背景色：

1、HTML结构

<input type='button' value='点击按钮获取页面背景色' onclick="fun()"/>

2、CSS样式

body{background: RGB(222,222,2);}

3、javascript代码

HTMLElementprototype__defineGetter__("currentStyle", function () { 

return thisownerDocumentdefaultViewgetComputedStyle(this, null); 

});

function fun(){

var color = documentbodycurrentStylebackgroundColor;

alert(color);

}

4、效果演示

var getStyle = function(dom, attr){

  return domcurrentStyle  domcurrentStyle[attr] : getComputedStyle(dom, false)[attr];

}

<div id="dd">ddsfsdf</div>

var pl = getStyle(dd, "paddingLeft");

consolelog(pl);

<child-component inline-template :message="message">

<div>

<p>内联模板</p>

<p>父组件数据: {{ message }}</p>

<p>子组件数据: {{ msg }}</p>

</div>

</child-component>

Vuecomponent('child-component', {

props:['message'],

data: function() {

return {

msg: '在子组件声明的数据'

}

}

});

props传一下

改成w=woffsetWidth;

js获取Html元素的实际宽度高度

第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1stylewidth拿不到宽度，而通过#div1offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。

小结，因为idoffsetWidth和idoffsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过idstyleatrr来获取。

现在的前端制作很少直接把样式写style里了，都是写在样式表里。如果你要获取的样式没有相对应的（就像#div1stylewidth对 应#div1offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。

js是无法直接修改css文件的，但可以通过取对象的方式修改对象的样式，通常有两种方法：

1、改变className，但首先在样式表中预设定样式类。

例如：documentgetElementById('obj')className='';

2、改变cssText。

例如：documentgetElementById('obj')styleheight='100px';

以上就是关于原生js获取元素的样式style属性值全部的内容，包括:原生js获取元素的样式style属性值、js 如何获取背景色的值、javascript 获得padding的值，求助~~~~~等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！