如何在純JavaScript中獲取css屬性值

Question

我想以百分比形式獲得元素的寬度。 我使用以下函數來獲取樣式，但它以像素為單位給出值。 這里變量樣式可以是任何css屬性，如寬度，高度等。

this.getStyle = function(style) {
    var elementStyle = window.getComputedStyle(that.element);
    var value = elementName.getPropertyValue(style);
    return value;
}

Answer 1

似乎你正在尋找

that.element.style.width
that.element.style.height
etc

Answer 2

我認為你總是得到像素，而不是％寬度。 原因是在對象渲染時它始終根據我們給出的％設置物理寬度，這可以通過dom進行驗證。 Javascript使用DOM(Document Object Model) ，而jQuery可以使用Dom以及通過document.getready()加載屬性之前。

因此，如上所述，您可以獲得屬性，但以像素為單位。

document.getElementById('yourdivname').element.style.width

要么

div2 = document.getElementById('div2');
alert("Width of div2 with style = " + div2.style.width);

使用jQuery獲取html元素的寬度百分比％

這是有趣的 ：

1. 根據開發人員用CSS指定的內容，是否可以使用jQuery以百分比或像素為單位獲取元素的寬度？

2. http://www.lucemorker.com/blog/javascript-vs-jquery-quick-overview-and-comparison

$（document）.ready是在加載HTML文檔后要觸發的jQuery事件，而onload是在加載所有內容后觸發的內置DOM事件。 因此，ready事件通常會比onload事件更早發生，允許盡可能早地執行代碼，而不必等待所有資產完全加載

有關詳細信息： - 單擊此鏈接 。

Answer 3

你嘗試過這樣的事情：

var width = (100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';