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. Android 使用NDK编译sipdroid Library

    sipdroid是一款开源的运行于Android平台上的voip,目前支持音频和视频通话: 项目拖管地址:http://code.google.com/p/sipdroid/ 下载源代码,导入ecli ...

  2. Nutch插件系统

    Nutch 基本情况 Nutch 是 Apache 基金会的一个开源项目,它原本是开源文件索引框架 Lucene 项目的一个子项目,后来渐渐发展成长为一个独立的开源项目.它基于 Java 开发,基于 ...

  3. Win7下安装git

    1.下载并安装git for windows版本:msysgit http://msysgit.github.com/   成功安装后,即可使用了,右键一个目录后可以看到菜单选项: 选择Git Gui ...

  4. CentOS下mysql安装和配置

    1.卸载原有mysql [root@iZ25ka6ra32Z /]# rpm -qa | grep mysql 查看该操作系统上是否已经安装了mysql数据库.有的话,我们就通过 rpm -e 命令 ...

  5. (转) 寄存器、RAM、ROM、Flash相关概念区别整理

    转自 http://m.blog.chinaunix.net/uid-30077524-id-5570244.html 文章对这几个东西讲得很清楚,值得收藏. 寄存器 寄存器是中央处理器内的组成部份. ...

  6. Surface Shader

    Surface Shader: (1)必须放在SubShdader块,不能放在Pass内部: (2)#pragma sufrace surfaceFunction lightModel [option ...

  7. 【问题与思考】1+"1"=?

    概述 在数学中1+1=2,在程序中1+1=2,而1+"1"=? 围绕着1+"1"的问题,我们来思考下这个问题. 目录: 一.在.Net代码中 二.在JavaSc ...

  8. js实现无刷新表单提交文件，将ajax请求转换为form请求方法

    最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...

  9. Tips5:通过 alt+鼠标左键 来完全展开或收缩层级

    通过 alt+点击 可以完全地展开或关闭unity中的各种层级关系,包括Hierarchy视图 或 Project视图中的. 上图中,第一次点击没有按住ALT键,可以发现子项目并没有被展开,而第二次是 ...

  10. selenium webdriver (python) 第一版PDF

    前言 如果你是一位有python语言基础的同学,又想通过python+ selenium去实施自动化,那么你非常幸运的找到了这份文档,我也非常荣幸能为你的自动化学习之路带来一丝帮助. 其实,我在sel ...