关闭

《JavaScript学习笔记六》:取非行间样式

标签: javascripthtml行间样式非行间样式
279人阅读 评论(0) 收藏 举报
分类:

《JavaScript学习笔记六》:取非行间样式

1、取行间样式

如果我们在行间设置元素的样式,则我们可以直接使用obj.style.width来获取这个元素的宽度,这里的width可以换成obj的任意样式属性来获取对应的value。

下面我们来看一个例子:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head>
    <script>
    window.onload=function ()
    {
        var oDiv = document.getElementById('div1');
        alert(oDiv.style.width);//这样只能取行间样式
        alert(oDiv.style.background);
    };
    </script>
    <body>
    <div id="div1" style="width:200px;height:100px;background:red;">
    </div>
    </body>
    </html>

2、取非行间样式

取非行间样式有两种方法:

1、obj.currentStyle[name]

2、getComputedStyle(obj,false)[name]

上面的两种方法并不是对所有的浏览器都适用,obj.currentStyle[name]对IE 11可行,对FireFox不行,而getComputedStyle(obj,false)[name]对FireFox、IE11可行,但是对低版本的IE不行。

因此,我们为解决上面的兼容器问题,我们可以写一个函数来进行处理:

    function getStyle(oDiv,name)
    {
        if(oDiv.currentStyle)
        {
            return oDiv.currentStyle[name];
        }
        else
        {
            return getComputedStyle(oDiv,false)[name];
        }
    }

这样,当我们想获取某个元素的样式的value时,就可以调用上面的函数即可完成功能。有一点需要说明的是:利用上面的方法是不能取复合样式的,例如不能取元素样式的background。

具体例子如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>

    <style>
    #div1 {width:200px;height:100px;background:red;}
    </style>

    <script>
    function getStyle(oDiv,name)
    {
        if(oDiv.currentStyle)
        {
            return oDiv.currentStyle[name];
        }
        else
        {
            return getComputedStyle(oDiv,false)[name];
        }
    }

    window.onload=function()
    {
        var oDiv = document.getElementById('div1');
        //IE11 可行,FF不行,提示oDiv.currentStyle is undefined
        //alert(oDiv.currentStyle['width']);

        //在FF 、IE11  可行,在低版本的IE中不行
        //alert(getComputedStyle(oDiv,false).width);

        //为了兼容性
        alert(getStyle(oDiv,'width'));
    };
    </script>
    </head>

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

以上就是关于取非行间样式的方法。

参考资料

1、blue老师的《js视频教程》

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

原生javascript设置获取行间样式及非行间样式的写法

HTML部分 获取样式css部分 #box{ height:100px; width:100px; background-color:red; font-s...
  • zxb122333
  • zxb122333
  • 2017-01-09 19:17
  • 808

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

*{ text-align:center;} input{ margin-top:30px; padding:10px 20px;} #div1{ width:500px; h...
  • jixiaomeng821
  • jixiaomeng821
  • 2015-01-09 17:26
  • 7565

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

在编写程序的时候我们往往有时候需要获取一下样式表里的某个值,或某个属性。而通常我们的样式是写在css的文件里的,那我们该怎么来去获取呢?我们又为什么要用这种方法呢?下面就来段代码比较下   本文就...
  • yh674256
  • yh674256
  • 2015-07-24 12:47
  • 654

JavaScript的获取非行间样式

html节点的样式分为:浏览器默认样式、引用样式(引用外部css文件的样式、style标签内定义的样式)、行间样式(节点style属性定义的样式) 下面就介绍一下如何获取非行间样式。 *{ ...
  • qq_33988065
  • qq_33988065
  • 2016-05-09 13:19
  • 215

浅谈行间样式与非行间样式

浅谈行间样式与非行间样式的获取
  • bluemoon_1
  • bluemoon_1
  • 2016-03-29 22:44
  • 121

JavaScript-取非行间样式(不能用来设置)

JavaScript-取非行间样式(不能用来设置) 知识点:currentStyle[attr],只能在IE上用。getComputedStyle(obj,false)[attr],Chrome、F...
  • xiuyang_song
  • xiuyang_song
  • 2017-08-01 22:11
  • 75

获取 非行间样式

有人问 不能简单的使用 alert(oDiv.style.width);来获取元素样式吗例 可以获取的情况: 无标题文档 window.onload=function () { v...
  • qq_38300174
  • qq_38300174
  • 2017-05-02 21:30
  • 105

JavaScript如何获取样式(行间)

前言:又接触了一些不知道的知识,真开心。下面的样式都只适用于行间样式!!!下面的样式都只适用于行间样式!!!下面的样式都只适用于行间样式!!!1、cssText关于这个属性,大家应该都很属性。 ...
  • m0_37568521
  • m0_37568521
  • 2017-11-21 00:40
  • 77

获取非行间样式

获取非行间样式
  • caohoucheng
  • caohoucheng
  • 2017-05-31 13:38
  • 134

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

1:window.getComputedStyle()方法 浏览器中提供了一个方法:window.getComputedStyle()的方法可以得到节点的计算后样式,该方法有两个参数,第一个是要所...
  • qianqianyixiao1
  • qianqianyixiao1
  • 2014-10-21 09:10
  • 1035
    个人资料
    • 访问:643362次
    • 积分:12280
    • 等级:
    • 排名:第1374名
    • 原创:606篇
    • 转载:14篇
    • 译文:0篇
    • 评论:111条
    联系方式
    有问题欢迎探讨咨询哈
    qq号就不留了哈
    欢迎留言
    博客专栏
    最新评论