js获取firefox下控件级联样式borderWidth,borderColor

  firefox下如何获取控件级联样式表中定义的borderWidth css样式。在IE或者chrome中可以通过borderWidth,borderColor直接获取到定义的border宽度和颜色,但是firefox通过getComputedStyle得到的级联样式对象中并未包含borderWidth,borderColor的定义,而是要到详细的每条边的样式定义,如borderLeftWidth,borderLeftColor。

js获取firefox下控件级联样式borderWidth,borderColor

  解决办法如下

 <div id="div4"></div>
 <style>
 #div4{border-left:solid 2px #000;border-right:solid 3px #000;}
 </style>
<script>
    function getStyle(obj, name) {
        if (obj.currentStyle) {
            return obj.currentStyle[name];
        } else {
            var style = getComputedStyle(obj, false),m=/^border(Color|Width|Style)$/.exec(name);
            if (navigator.userAgent.indexOf('Firefox') != -1 && m) {//为firefox并且是通过borderWidth等来获取,则修改为通过borderTopWidth详细来获取
                var arr = [style['borderTop' + m[1]], style['borderRight' + m[1]], style['borderBottom' + m[1]], style['borderLeft' + m[1]]];
                return arr.join(' ');
            }
            return style[name];
        }
    }
    window.onload = function () {
        var oDiv4 = document.getElementById('div4');
        alert(getStyle(oDiv4, 'borderWidth'));
    }
</script>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:js获取firefox下控件级联样式borderWidth,borderColor

评论(0)Web开发网
阅读(191)喜欢(0)JavaScript/Ajax开发技巧