Javascript如何用一个优雅的姿势通过getStyle函数来获取元素的样式

`Javascript如何用一个优雅的姿势通过getStyle函数来获取元素的样式“
想要得到某个元素的某个样式属性,可以用:

1.<div id="div1" style="width: 200px;">div>

2<script>
        var oDiv=document.getElementById('div1');
        console.log(oDiv.style.width);
    script>

但这样只能得到写在元素上的行内样式,对于link进来的外部样式文件或中写的样式是获取不到的。而在一个设计良好的网页文件里,
样式表一般是与文档结构分离开来以外部文件存在的。所以,仅仅用元素的style不能如意地获取元素CSS样式!
既然style的方式不是那么完美,那么该用什么方法来获取元素的CSS样式呢??
我们能用到的样式一定存在解决的办法,只不过存在一些需要我们处理的兼容问题,
各浏览器都会存在一些差异,Firefox、webkit(Chrome,Safari)支持W3C标准的方法:getComputedStyle(),而IE6/7/8不支持标准的方法但是有私有的属性来实现:currentStyle,而IE9及以上和Opera两个都支持。
但是有了这2个方法和属性的结合基本上可以满足大多数要求了。
首先我们来看一下DOM提供的一个 getComputedStyle() 方法获取给定元素的样式表;
getComputedStyle()获得的是计算后的值。
第一个参数为需要获取样式的元素对象;第二个参数为伪元素,如:hover, :first-letter, :before等等,
如果不需要伪元素则该参数为null或者false。getComputedStyle()函数可以从 document.defaultView 对象中访问到
代码如下

1.<div id="div1">div>
    2.<style>#div1{width: 200px;height: 200px;background-color: red;}style>
    3<script>
        var oDiv=document.getElementById('div1');
            console.log(getComputedStyle(oDiv).width);
         script>

可IE6,IE7,IE8不支持但是IE除了提供 style 属性之外,还有一个 currentStyle 属性currentStyle 的用法和 style 的用法一样,
然而不同的是,currentStyle 如名字所示获取到的是 element 元素当前(所有的)样式代码如下:

        var oDiv=document.getElementById('div1');
        console.log(oDiv.currentStyle .width);

好了,在 IE 下我们已经解决了获取外部样式的问题.你以为这就结束了吗??

!!!这样做虽然能获得元素的样式,但是也存在问题比如在javascript中“-”(中划线或连字符)代表的是减号,而在CSS中,许多样式属性都有这个符号,如background-color、font-size等,
最后发现不仅IE(日志: 16px)火狐(16px)都能自动的转换过来。

然而并没有还存在这样的问题float,float在javascript中属于保留字,在javascript中设置或获取元素的float的值,都有其他的代替写法,在标准浏览器中为cssFloat,而在IE6/7/8中为styleFloat

解决办法如下

if(oDiv.style.styleFloat){
            return oDiv.style.styleFloat;   //ie
        }else if(oDiv.style.cssFloat){
            return oDiv.style.cssFloat;     //火狐
        }

在具体使用的时候还发现兼容问题透明度filter:alpha(opacity=60)与opacity=0.6(IE)具体解决办法如下:
当需要做兼容的时候,两个都要写filter:alpha(opacity=60)与opacity=0.6(IE),这样火狐等浏览器会获得opacity=0.6;
在不完全放弃IE的情况下就要另外转换了;
最终代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
    <style>
        #div1{font-size:16px;
            width: 200px;
            height: 200px;
            background-color: #0FB2D4;
            float: right;
            opacity: 0.5;
            filter: alpha(opacity:50);
        }
    style>
head>
<body>
<div id="div1" style="color:red">123div>
<script>
    var oDiv= document.getElementById("div1");
    function getStyle(ele,name){
        if(oDiv.style.styleFloat){
            return oDiv.style.styleFloat;   //ie下float处理
        }else if(oDiv.style.cssFloat){
            return oDiv.style.cssFloat;     //火狐等float处理
        }
        if (oDiv.currentStyle) {
            return oDiv.currentStyle[name];
        } else {
            return getComputedStyle(oDiv, false)[name];
        }
    }
    console.log(getStyle(oDiv,"width"));
    console.log(getStyle(oDiv,"opacity"));
    console.log(getStyle(oDiv,"float"));
    console.log(getStyle(oDiv,"backgroundColor"));
script>
body>
html>

PS:第一次写博客,该函数还可能存在一些问题,希望在以后的学习慢慢改善。

你可能感兴趣的:(Javacript)