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. [PaPaPa][需求说明书][V0.3]

    PaPaPa软件需求说明书V0.3 前   言 不好意思,本文是没有前言的. 别说是前言了,其实关于界面的内容我也是不打算写!!   因为我知道你们想要的界面是这样的: 再不济也应该是这样的: 但是我 ...

  2. MAC自带的SVN进行升级

    1.下载高版本svn:http://www.wandisco.com/subversion/download 2.安装 3. #1.在.bash_profile添加export PATH=/opt/s ...

  3. C# 类型基础——你可能忽略的技术细节

    引言 本文之初的目的是讲述设计模式中的 Prototype(原型)模式,但是如果想较清楚地弄明白这个模式,需要了解对象克隆(Object Clone),Clone 其实也就是对象复制.复制又分为了浅度 ...

  4. SNF开发平台WinForm之四-开发-主细表管理页面-SNF快速开发平台3.3-Spring.Net.Framework

    4.1运行效果: 4.2开发实现: 4.2.1          有了第一个程序的开发,代码生成器的配置应该是没有问题了,我们只要在对应的数据库中创建我们需要的表结构就可以了,如下: 主表结构如下: ...

  5. mark：如何使用FileZilla连接虚拟机上的Fedora

    1. 下载FileZilla 2. 在虚拟机上安装SSH,http://linuxconfig.org/how-to-install-start-and-connect-to-ssh-server-o ...

  6. WPF中模板选择和DataContext的一些使用

    如图样: View结构 MainView(MainViewModel)|---Guide1View(Guide1ViewModel)|---Guide2View(Guide2ViewModel) |- ...

  7. 深入HTML5 Web Worker应用实践：多线程编程

    HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...

  8. 封装系统自带的Debug

    Unity3d的Debug.Log函数用于打印日志,一般项目中都会对其作如下两件事情: (1)希望有一个总的开关来控制整个游戏中日志的打印与否: (2)有的系统会将Log封一层并添加统一的标记,比如S ...

  9. 【原创】C#搭建足球赛事资料库与预测平台(2) 数据库与XCode组件

            本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源C#彩票数据资料库系列文章总目录:[目录]C#搭建足球赛事资料库与预测平台与彩票数据分析目录  本篇文章开始将逐步 ...

  10. 【转载】Linux i386+源码中常见宏标识tag的定义

    转载自:http://blog.chinaunix.net/uid-20729583-id-1884553.html 这 些宏包括 __init.__initdata.__initfunc().asm ...