getComputedStyle oder currentStyle für border-left-width

Question

Mein HTML : <div id="bar" ></div>

Mein CSS :

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

Mein 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

Die Fiedel : http://jsfiddle.net/4ABhZ/1

Wie kann ich die border-left-width Eigenschaft (bei meinem Beispiel funktioniert es nicht (auf Firefox))

Answer 1

Prüfen Sie Ihr border-left-style Eigentum. Sie ist eingestellt auf none (die Standardeinstellung). Setzen Sie ihn auf etwas wie solid und schon kann es losgehen: http://jsfiddle.net/Paulpro/4ABhZ/4/

Answer 2

Um ältere Browser zu unterstützen, müssen Sie den Bindestrich-css in camelCase ändern.

Sie können camelCase auch in den anderen Browsern verwenden, und die Eigenschaften des getComputedStyle-Objekts direkt lesen.

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

alert(getStyle(document.getElementById('bar'),'borderTopWidth'));

Hinweis: Die css-Definition benötigt ein Stil sowie eine Breite für einen Rahmen, um eine berechnete Breite zu haben (und er kann nicht auf display:none gesetzt werden, wenn Sie seine Abmessungen berechnen...)