無法訪問元素的style.height在JS

我試圖修改使用使用JS另一個元素的高度（elementOne）（沒有jQuery的）無法訪問元素的style.height在JS

當我嘗試登錄elementOne.style的元素高度（elementTwo）。高度，我得到一個空字符串使用Safari和Chrome檢查器的我可以看到計算高度，但無法使用JS訪問它。它顯示爲褪色（參見屏幕截圖）

Screenshot of Safari inspector | Screenshot of Chrome inspector

.elementOne { 
    min-height: 100vh; 
    width:100%; 
}

ElementOne具有最小高度設定爲100vh但基於子元素的設備/尺寸在尺寸自動增加。它沒有設置高度。 ElementTwo沒有默認的任何css

我想這樣做只使用JS和根本不想使用jQuery。

來源

2016-07-10 Rohan B

我想你想使用dom元素的屬性.clientHeight。 See the mdn arcticle about it。

來源

2016-07-10 10:06:31 TN1ck

如果你想在高度爲元素風格，你需要getComputedStyle（或currentStyle舊IE），以獲得計算風格：

function getStyle(element) { 
    if (typeof getComputedStyle !== "undefined") { 
     return getComputedStyle(element); 
    } 
    return element.currentStyle; // Old IE 
} 

var heightStyle = getStyle(element).height;

這將是一個字符串，單位（不一定是CSS中的單元）。

如果你想要的元素的高度，而不是它的height風格，使用element.offsetHeight或element.clientHeight。他們將是數字;它是四捨五入到最接近整數的像素數。

如果您想要獲得最精確的信息（包括相關的小數像素，可能會發生），那麼您可以使用getBoundingClientRect。

實施例：

function getStyle(element) { 
 
    if (typeof getComputedStyle !== "undefined") { 
 
    return getComputedStyle(element); 
 
    } 
 
    return element.currentStyle; // Old IE 
 
} 
 
var element = document.querySelector(".foo"); 
 
var bounding = element.getBoundingClientRect(); 
 
console.log({ 
 
    "height style": getStyle(element).height, 
 
    "offsetHeight": element.offsetHeight, 
 
    "clientHeight": element.clientHeight, 
 
    "bounding height": bounding.height 
 
});

.container { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 200px; 
 
    position: relative; 
 
    background-color: yellow; 
 
} 
 
.foo { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 33.3%; 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="foo"></div> 
 
</div>

來源

2016-07-10 10:08:13

無法訪問元素的style.height在JS

回答

相關問題