码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 学习—— js获取行间样式和非行间样式

时间:2015-11-16 00:56:56      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:

1. 问题引入

<head>
<style>
    #div1{
        width:150px;
        height:200px;
        position:absolute;
        left:-150px;
        background: green;
    }
</style>
<script>
    window.onload = function(){
        var oDiv1 = document.getElementById(‘div1‘);
        alert(oDiv1.style.left); //获取left属性的值
    }
</script>
</head>

<body>
<div id="div1"></div>
</body>

上面代码的意思是想要获取得到id="div1"元素的left属性值。但是当我们运行上面代码的时候就会发现,弹窗弹出的内容确实什么都没有。

我们明明在<style></style>标签内定义了该元素的left属性,为什么alert(oDiv.style.left);确实返回一个什么都没有的弹窗呢?

其实,这个问题的原因是:oDiv1.style.left这样的格式来获取的left是非行间样式的left。

2. 什么是非行间样式?

非行间样式就是指不是写在标签体内的style属性的样式。如上面的代码中<style>....</style>内的定义的样式都是非行间样式。

3. 那什么是行间样式?

行间样式就是写在标签体内的样式:如,<div style="left:100px">,在这里left样式就是行间样式。

4. 那我们该如何获取行间样式呢?

要获取行间样式我们可以这样操作:

低版本ie浏览器下使用oDiv1.currentStyle.left;进行获取非行间样式。

其它浏览器下使用var style = window.getComputedStyle(oDiv1,null);  //第二个参数直接传入null就行,没什么作用的。

          alert(style.left); //便可以返回行间样式的left属性值

5. 整合在一起,兼容所有浏览器的代码:

 window.onload = function(){
        var oDiv1 = document.getElementById(‘div1‘);
        if(oDiv1.currentStyle){
            alert(oDiv1.currentStyle.left);
        }else{
            alert(getComputedStyle(oDiv1,null).left);
        }
    }

 

JavaScript 学习—— js获取行间样式和非行间样式

标签:

原文地址:http://www.cnblogs.com/JamKong/p/4967815.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!