如何javascript获取css中的样式

obj.style.height只能获取行间样式,但是我们要怎么获取写在css文件中的样式呢?


方法/步骤

  1. 首先我们要用一个新的方法currentStyle.这个方法由current和style两个单词组成意思是:目前的样式.也就是加载css文件后取出来的样式.

    如何javascript获取css中的样式_第1张图片

  2. currentStyle的用法是:元素.currentStyle.属性名

    下面我们开始获取如图div1的width样式,那我们就需要这样写:

    var w=document.getElementById('div1').currentStyle.width;

    alert(w);

    在IE下调试,看是不是可以得到正确的宽度了

    如何javascript获取css中的样式_第2张图片

    如何javascript获取css中的样式_第3张图片

  3. IE可以了然后我们换个火狐试试,无论我怎么刷新都没有弹出我希望的200px,f12调试一下,原来如此,火狐不支持currentStyle方法.

    如何javascript获取css中的样式_第4张图片

    如何javascript获取css中的样式

  4. 火狐和Chrome支持的是另外一个方法:getComputedStyle,大概意思就是获取完成的样式.

    用法:getComputedStyle(元素,false).属性名

    同2,我们的代码应该这样写:

    var w=getComputedStyle(document.getElementById('div1'),false).width;

    alert(w);

    现在不报错了,也能正常的获取了

    如何javascript获取css中的样式_第5张图片

  5. 可是我们用ie试试,肯定没反应了.因为ie又不支持getComputedStyle了.....是不是很蛋疼

  6. 所以现在我们要写一个函数叫做getClass;

    内容如下:

    //兼容获取非行间样式

    function getClass(obj,name)

    {

     

    if(obj.currentStyle)

    {

    return obj.currentStyle[name];//IE下获取非行间样式

     

    }

    else

    {

    return getComputedStyle(obj,false)[name];//FF、Chorme下获取费行间样式

    }

    }

  7. 然后我们想要获取css中的样式就这样写:

    var w=getClass(document.getElementById('div1'),"width");

    alert(w);

    如何javascript获取css中的样式_第6张图片

  8. 试试ie,试试火狐.都很ok的啦

    如何javascript获取css中的样式_第7张图片

    如何javascript获取css中的样式_第8张图片

    END

注意事项

  • 在js中'[]'的作用和'.'的是一样的,所以函数里面写的是obj.currentStyle[name]。

  • 获取背景颜色的时候不能直接用background,要用background-color

 

来源:https://jingyan.baidu.com/article/2a138328a90086074a134f80.html

你可能感兴趣的:(如何javascript获取css中的样式)