• javascript getComputedStyle,getPropertyValue,CurrentStyle说明


    Dom中的getPropertyValue方法可以用来获取元素中指定的css属性值.该方法支持W3C标准.与IE中的currentStyle方法作用相同.都是根据指定的css属性名称来获取属性值.比如要获取某div的宽度是多少,文字排放text-align是怎么对齐的,以及position如何定位的.
    他们的区别是:
    1:getPropertyValue必须配合getComputedStyle方法一起使用.
    2:getPropertyValue支持W3C标准.但不支持IE浏览器,
    3:currentStyle非W3C标准.只支持IE.不能在FF等浏览器下使用.
    如果想在多浏览器里实现这种效果,必须根据判断浏览器来配合使用.我在下面会给出一个兼容IE和FF等浏览器获取元素css属性值的例子.

     
    语法:
    css_value=window.getComputedStyle.getPropertyValue(css_name)
     
    返回值:

    css_value:返回对某个css属性值的引用.如:text-align值,position值等.

     
    参数

    window.getComputedStyle:直接使用window对象调用getComputedStyle方法来获取所有可用的css属性.
    css_name:要获取的css属性值的名称.比如:text-align,position,background等等.

     

    getPropertyValue实例

     

    <html>
    <head>
    <title>Dom:currentStyle使用实例</title>
    <style>
    #a{
    border:1px solid;
    200px;
    height:100px;
    text-align:center;
    position:absolute;
    }
    </style>
    </head>
    <body>
    <div id="a"></div>

    <script language="javascript">
    var a = document.getElementById("a")//获取元素
    if(document.all){//IE浏览器
    var wh = a.currentStyle["width"];
    var text_align = a.currentStyle["textAlign"];
    var posi = a.currentStyle["position"];
    }
    else{//FF或其他浏览器
    var wh = window.getComputedStyle(a,null).width;
    var text_align = "textAlign"; //凡是带横杠(-)的属性,在FF浏览器里必须转换一下属性名称
    text_align = text_align.replace(/([A-Z])/g,"-$1");//使用正则转换
    text_align.toLowerCase();
    text_align = window.getComputedStyle(a,null).getPropertyValue(text_align);
    var posi = window.getComputedStyle(a,null).getPropertyValue("position");
    }
    alert("宽度值是:" + wh);
    alert("文本排放是:" + text_align);
    alert("position值是:" + posi);
    </script>
    </body>
    </html>

    经测试getPropertyValue至少兼容以下浏览器:Firefox
    W3C标准:是

     

    getComputedStyle说明:

     

    Dom中getComputedStyle方法可用来获取元素中所有可用的css属性列表.以数组形式返回.注意啊getComputedStyle不会直接返回元素中某个css样式的属性值.他返回的是一个数组.这个数组中包括所有可用的css属性.例如:float,positin,border,background等等.
    通常这个方法必须配合getPropertyValue属性使用,才可以获取指定的css属性值,如只想获取width的值或text-align以及left的值.就必须使用getPropertyValue属性.为了方便理解.我在下面例子中只演示getComputedStyle方法的作用.
    该方法不支持IE浏览器,请使用FF和其他支持Dom标准的浏览器查看.
    如果想了解获取某个属性的值,请点击:currentStyle或getPropertyValue

     
    语法:
    arr_style=window.getComputedStyle(elem_id,ov);
     
    返回值:

    arr_style:以数组的形式.返回所有的css可用属性.

     
    参数

    window:直接调用window对象访问getComputedStyle方法.
    elem_id:元素的id,要获取该元素的css样式
    ov:伪元素,是否要获取伪元素属性值.如hover,active,link等属性.如果不想获取这些伪元素的属性值请填写为null.

     

    getComputedStyle实例

     

    <html>
    <head>
    <title>Dom:getComputedStyle使用实例</title>
    </head>
    <body>
    <h2>第一次会弹出获取的css属性数组的长度,然后依次弹出可用属性,大家会发现background-attachment,background-color,background-image
    看完例子你应该会明白getComputedStyle具体作用了,如果想获取某个属性的值.请配合使用getPropertyValue
    <div id="a"></div>
    <script language="javascript">
    var a = document.getElementById("a")//获取元素
    var arr_style = window.getComputedStyle(a,null);
    alert(arr_style.length);//数组的长度.包含所有css可用属性
    alert(arr_style[0]);//我们来看看数组第一个css属性是什么
    alert(arr_style[1]);//再来看第二个
    alert(arr_style[2]);//再来第三个
    </script>
    </body>
    </html>

    Dom中的currentStyle属性.从字面上理解这是当前样式风格.没错currentStyle就是用来获取元素内Css的style样式属性值.比如说元素的width值height值.甚至元素的文本排放方式text-align,包括position等等.所有的css属性值都可以被获取.但是currentStyle仅支持IE浏览器,如若想在FF或基于Dom标准的其他浏览器内实现相同效果.请使用getComputedStyle属性.我在下面给出一个例子,来获取div的宽度值,文本如何排放.和绝对定位的值.已支持IE和FF其他浏览器.放心浏览!

     
    语法:
    o=elem.currentStyle[style_name];
     
    返回值:

    o:返回元素某个样式属性值的引用.

     
    参数

    elem:要在该元素内获取样式属性.
    style_name:样式属性名称.如:width,height,text-align

     

    currentStyle实例

     
    <html>
    <head>
    <title>Dom:currentStyle使用实例</title>
    <style>
    #a{
    border:1px solid;
    200px;
    height:100px;
    text-align:center;
    position:absolute;
    }
    </style>
    </head>
    <body>
    <div id="a"></div>

    <script language="javascript">
    var a = document.getElementById("a")//获取元素
    if(document.all){//IE浏览器
    var wh = a.currentStyle["width"];
    var text_align = a.currentStyle["textAlign"];
    var posi = a.currentStyle["position"];
    }
    else{//FF或其他浏览器
    var wh = window.getComputedStyle(a,null).width;
    var text_align = "textAlign"; //凡是带横杠(-)的属性,在FF浏览器里必须转换一下属性名称
    text_align = text_align.replace(/([A-Z])/g,"-$1");//
    text_align.toLowerCase();
    text_align = window.getComputedStyle(a,null).getPropertyValue(text_align);
    var posi = window.getComputedStyle(a,null).getPropertyValue("position");
    }
    alert("宽度值是:" + wh);
    alert("文本排放是:" + text_align);
    alert("position值是:" + posi);
    </script>
    </body>
  • 相关阅读:
    网络编程基础
    面试题
    面试题合集
    异常
    三个重要的模块loggning,hashlib,configparse
    面向对象进阶
    单例模式
    反射
    封装
    开发规范
  • 原文地址:https://www.cnblogs.com/wangluochong/p/2364479.html
Copyright © 2020-2023  润新知