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获取行间样式和非行间样式的更多相关文章

  1. javascript获取行间样式和非行间样式--兼容写法

    style:获取行间样式: currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意 ...

  2. JS获取非行间样式

    我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...

  3. js和jquery中获取非行间样式

    样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...

  4. js获取非行间样式/写入样式（行间）

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  5. javascript中获取非行间样式的方法

    我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的,但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.a ...

  6. JavaScript获取非行间样式/定义样式

    html节点的样式分为以下几种 (1)浏览器默认样式 (2)引用样式(引用外部css文件的样式.style标签内定义的样式) 引用外部css样式:<link rel="styleshe ...

  7. js获取非行间样式/定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  8. js获取非行间样式或定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  9. js用currentStyle和getComputedStyle获取css样式（非行间） 兼容ie与火狐

    用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputed ...

随机推荐

  1. 实时流式计算框架Storm 0.9.0发布通知(中文版)

    Storm0.9.0发布通知中文翻译版(2013/12/10 by 富士通邵贤军 有错误一定告诉我 shaoxianjun@hotmail.com^_^) 我们很高兴宣布Storm 0.9.0已经成功 ...

  2. NoSql---MongoDB基本操作

    MongoDB 最大的特点是他支持的查询语言非常强大,其语法有点类似于面向对象的查询语 言,几乎可以实现类似关系数据库单表查询的绝大部分功能,而且还支持对数据建立索引.最后由于 MongoDB 可以支 ...

  3. IIS7下配置SSAS通过HTTP远程连接

    淘宝 问答 学院 博客 资源下载 高端培训                  登录 注册                                   全部问题 文章 话题 人物         ...

  4. GNU GCC 扩展属性

    http://gcc.gnu.org/onlinedocs/gcc/Function-Attributes.html constructor destructor constructor (prior ...

  5. 【翻译】VSM 和触发器

    原文:The VisualStateManager and Triggers Author:Carole Snyder Silverlight 推出了可视化状态管理器( Visual State Ma ...

  6. [转载]SharePoint 2013搜索爬外网配置

    本文介绍SharePoint 2013 设置外网(Internet)爬网源: 下面是步聚: 1. 新建外部爬网源 a. 打开 “SharePoint 2013 Central Administrati ...

  7. "浅谈Android"第一篇：Android系统简介

    近来,看了一本书,名字叫做<第一行代码>,是CSDN一名博主写的,一本Android入门级的书,比较适合新手.看了书之后,有感而发,想来进行Android开发已经有一年多了,但欠缺系统化的 ...

  8. ASP.NET MVC权限验证 封装类

    写该权限类主要目地 为了让权限配置更加的灵活,可以根据SQL.json.或者XML的方式来动态进行页面的访问控制,以及没有权限的相关跳转. 使用步骤 1.要建一个全局过滤器 //受权过滤器 publi ...

  9. Linux下中文显示乱码问题

    Linux下中文显示乱码问题 输出编码选utf-8 然后文件本身编码也要是utf-8

  10. Spring重点—— IOC 容器中 Bean 的生命周期

    一.理解 Bean 的生命周期,对学习 Spring 的整个运行流程有极大的帮助. 二.在 IOC 容器中,Bean 的生命周期由 Spring IOC 容器进行管理. 三.在没有添加后置处理器的情况 ...