js用style属性可以获得html标签的样式，但是不能获取非行间样式，如何获取css的非行间样式呢，在低版本ie我们可以用currentStyle，在其他浏览器我们可以用getComputedStyle。

1、ie

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #box{

            width:200px;

            height:200px;

            background: skyblue;

        }

    </style>

    <script>

        window.onload=function(){

            var box=document.getElementById("box");

            alert(box.currentStyle["width"]);       //200px

        }

    </script>

</head>

<body>

    <div id="box"></div>

</body>

</html>

2、其他浏览器

alert(getComputedStyle(box,false)["width"]);        //200px

3、兼容

<script>

        function getStyle(obj,attr){

            if(obj.currentStyle){

                return obj.currentStyle[attr];

            }else{

                return getComputedStyle(obj,false)[attr];

            }

        }

        window.onload=function(){

            var box=document.getElementById("box");

            alert(getStyle(box,"width"));    //兼容ie及其他浏览器

        }

    </script>

4、获取及设置非行间样式

<script>

        function getStyle(obj,attr,value){

            if(arguments.length==2){         //根据参数个数执行相应操作

                if(obj.currentStyle){

                    return obj.currentStyle[attr];

                }else{

                    return getComputedStyle(obj,false)[attr];

                }

            }else{

                obj.style[attr]=value;         //这里需要注意，使用obj.style.attr无效

            }

        }

        window.onload=function(){

            var box=document.getElementById("box");

            getStyle(box,"backgroundColor","yellowgreen");          //把盒子的背景颜色设置成黄绿色

            alert(getStyle(box,"width"));      //弹出盒子的宽度200px

        }

    </script>

原生js提取非行间样式的更多相关文章

  1. JS获取非行间样式

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

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

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

  3. JS获取非行间样式及兼容问题

    获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

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

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

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

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

  6. js 获取非行间样式

    1.getComputedStyle(nodeObj,false):该方法是BOM对象,第一个是要获取样式的节点对象:第二个可以写成任何的字符一般写成false或者null,这里最好是用false因为 ...

  7. JS取非行间样式

    <title>无标题文档</title> <style> #div1{width:200px;height:200px; background:red;} < ...

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

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

  9. js兼容总结之获取非行间样式

    非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getEle ...

随机推荐

  1. OpenLDAP部署目录服务

        文档信息 目        的:搭建一套完整的OpenLDAP系统,实现账号的统一管理.                     1:OpenLDAP服务端的搭建               ...

  2. C语言进阶——注释符号12

    注释可能大认为非常简单,但是注释其实在C语言中很关键,来看下面一段对话. ---学生: 老师,我觉得注释没有必要深究,因为很简单,对程序功能也没有影响. ---老师: 注释是C语言最重要的工具,我们先 ...

  3. sql查询平均下单时间

    SQL查询订单平均审核时长 今天在写一个sql,需求是算一个订单在执行状态中的各个节点的时长 比如在订单中,状态0为开始接单,状态3为已经审核,那么现在需要计算每个客服的平均审核时长 像图中所示:这个 ...

  4. python基础之多态与多态性、绑定方法和非绑定方法

    多态与多态性 多态 多态并不是一个新的知识 多态是指一类事物有多种形态,在类里就是指一个抽象类有多个子类,因而多态的概念依赖于继承 举个栗子:动物有多种形态,人.狗.猫.猪等,python的序列数据类 ...

  5. [bzoj1999][noip2007]Core树网的核

    好久没写题解了.这题不算太水就写一下题解. 话说回来,虽然不水但是挺裸.可以说题意即一半题解了. 我猜粘了题面也没有人去看的,所以直接人话题意了. 给一棵树,点数1e6,(当年noip的n当然是只有3 ...

  6. P1862 输油管道问题

    P1862 输油管道问题 题目背景 听说最近石油危机 所以想到了这题 题目描述 某石油公司计划建造一条由东向西的主要输油管道.该管道要穿过一个有n口油井的油田.从每口油井都要有一条输油管道沿最短路径( ...

  7. RSA 加解密算法详解

    RSA 为"非对称加密算法".也就是加密和解密用的密钥不同. (1)乙方生成两把密钥(公钥和私钥).公钥是公开的,任何人都可以获得,私钥则是保密的. (2)甲方获取乙方的公钥,然后 ...

  8. android 布局preview 技巧

    最近开始看老外写的文章,博客,嗯,不能说比国人写的好,但是感觉看着很爽.真的,一手资料就是爽. 嗯,自己做得不错,第一次看外文博客,我知道自己怎么看的,一句话一句话看下来的,越看越有感觉. 下面这个 ...

  9. 批量修改Linux文件夹下所有文件大小写

    小写转大写: [zengs@SYS SOS]$ for cpplive in *; do mv $cpplive `echo $cpplive|tr [a-z] [A-Z]`; done 大写转小写: ...

  10. RedHatEnterpriseLinuxServerRelease7.3上配置vsftpd服务器

    0.vsftpd与ftp安装 yum install -y vsftpd ftp 1.vsftpd 服务启停相关命令 systemctl start vsftpd systemctl stop vsf ...