border-left-width的getComputedStyle或currentStyle

时间:2012-06-13 15:58:04

标签: javascript css

我的HTML:<div id="bar" ></div>

我的CSS:

#bar
{
    border-left-width:150px;
}

我的JS:

function getStyle(el,styleProp)
{
    if(el.currentStyle)var y=el.currentStyle[styleProp];
    else if(window.getComputedStyle)var y=document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
    return y;
}

alert(getStyle(document.getElementById("bar"),"border-left-width"));//Outputs 0px

小提琴:http://jsfiddle.net/4ABhZ/1

我如何获得border-left-width财产? (以我的例子,它不起作用(在Firefox上))

3 个答案:

答案 0 :(得分:2)

检查您的border-left-style财产。它设置为none(默认值)。将其设置为类似solid的内容,您就可以了:http://jsfiddle.net/Paulpro/4ABhZ/4/

答案 1 :(得分:1)

要支持旧浏览器,您需要将连字符css更改为camelCase。

您也可以在其他浏览器中使用camelCase 直接读取getComputedStyle对象的属性。

function getStyle(el, css){
    if(window.getComputedStyle) return getComputedStyle(el, '')[css];
    if(el.currentStyle) return el.currentStyle[css];    
}

<强>警报(对getStyle(的document.getElementById( '巴'), 'borderTopWidth'));

注意 - css定义需要样式以及边框的宽度具有计算宽度(并且在计算其尺寸时不能将其设置为display:none .. 。)

答案 2 :(得分:-1)