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

JavaScript013

原生js获取元素的样式style属性值,第1张

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

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

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

特点:

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

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

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

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

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

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

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

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

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

参考链接 chokcoco的博客园

运用js获取div宽度,原生JS获取DIV的属性有两种方法,js 获取方法命令如下:

currentStyle和getComputedStyle,前者是兼容IE端的,后者也兼容W3C,两者内核不同,所以就有两种兼容的写法。

如果只是单独的获取某个属性值可以这样写:

obj.currentStyle[属性名]这种不兼容-webkit-内核的,

所以一般是封装成一个函数可以到处调用,而且不止针对某个属性值。

function getStyle(obj,styleName){if(obj.currentStyle){return obj.currentStyle[styleName]}else{return getComputedStyle(obj,null)[styleName]

}

}

上面是封装好一个函数,可以直接调用。

DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。

用JS获取Html标签属性有两种方法:

如<a id="link" href="www.baidu.com" title="测试"

blogname="前端开发">Web开发</a>

JS代码:

var ka=document.getElementByI d("link")

alert(ka.getAttribute("id"))

alert(ka.id)

两种方法都能弹出a标签的ID属性,但从各浏览器兼容上来说用ka.id的方式更好,但对于自定义属性blogname,则就要用getAttribute()来实现了,如:

alert(ka.getAttribute("blogname"))//前端开发

总结如下:

JS获到Html标签常规属性用ka.id,获到Html标签的自定义属性就用ka.getAttribute("id")