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

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

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

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

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

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

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

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

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

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

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

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

11、这里的 HACK方法是使用 element.getBoundingClientRect()方法。

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

二、js如何获取input输入框中输入的值

可以用value属性获取input输入框中的值。

1、新建html文档，在body标签中添加input标签、button标签和span标签，点击按钮span标签中显示输入框中的值：

2、添加js代码，ipt、btn和val分别表示选择当前标签，onclick表示按钮点击事件，ipt.val表示获取input输入框中的值，然后将这个值赋值给span标签中的内容：

3、在输入框中输入内容，点击按钮，这时输入框中的值将会在span标签中显示：

三、JS获取文本框的值

1.首先通过文本框的使用getElementById("idName")；方法来获取文本框对象；

2.通过文本框对象来获取文本框的value值

在新打开的页面获得前面文本框内的内容：

window.opener.document.getElementById('文本框ID').value

根据指定的 id属性值得到对象。返回 id属性值等于 sID的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。