首页 » 程序设计 » javascript无法获取css属性值的解决方法

发表时间：2010-9-20 12:57:37 | 分类：程序设计 | 阅读：997

javascript无法直接通过document.getElementById([id]).style.[属性值]去获取html标签里的class属性里的值，探究过程如下：

一、在标签里直接加入style

<div id="div1" style="border: #f00 1px solid; width:200px;"></div>

function getWidth() {
            var obj = document.getElementById("div1");
            alert(obj.style.width);
}

执行结果如下图：正常

二、仅在标签时加入一个class，不加style

<style type="text/css">
.dicCss{width:200px; height:200px; border:1px solid #f00;}
</style>

<div id="div2" class="divCss"></div>

function getWidth() {
            var obj = document.getElementById("div2");
            alert(obj.style.width);
}

执行结果如下图:没有得到预期的值

三、重写javascript方法

<div id="div2" class="divCss"></div>

function getClassAttrValue(obj, attribute) {
            return obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute];
}

function getWidth() {
            var obj = document.getElementById("div2");
            alert(getClassAttrValue(obj, "width"));
}

执行结果如下图：正常

上一篇： android学习笔记之四 - android搜索的自动完成功能 下一篇： 选择魅族MX还是小米M1

评论列表


#2 作者:你好博主 评论时间:2011-12-29 17:02:12
先问一下文章分类那里的动态金鱼哪里有（能提供吗？） 另外非常感谢上面写的代码，解决了我的一个难题，如果能早看见的话我也不用那么辛苦，由于是新手，我做拖拽的时候，我用它直接取id里的属性值，刚开始的时候总在左上角，之后正常了，原来第一次去的是0，所以才再左上角的，唉，真是辛苦让我想原因，原来问题在这

回复：你好，不知你指的动态金鱼是什么？是不是那个Falsh？如果是它的话，你直接下载就可以了http://www.fetso.cn/themes/micro/images/bg.swf

#1 作者: 学夫子 评论时间:2010-9-23 16:44:31
代码盲飘过，希望中秋节的愉快永远伴随着博主啊
Recole: 谢谢

发表评论


昵称：
邮件：
链接：