使用JavaScript，如何根據另一個元素的CSS樣式更改一個元素的CSS樣式？

Question

我正在嘗試根據另一個div的不透明度/可見性來更改一個div的高度。 看來這應該很簡單，但是我嘗試的任何方法似乎都無效。

我當時在想這樣的事情：

var red = document.getElementById("red");
var green = document.getElementById("green");

if(red.style.opacity = "0"){
green.style.height = "200px";
}

但這只是改變了不透明度和高度，而沒有實際檢查不透明度是如何開始的。

任何有關如何實現我所追求的功能的建議將不勝感激！

Answer 1

使用getComputedStyle-

getComputedStyle（）方法獲取指定元素的所有實際（已計算）CSS屬性和值。

 var red = document.getElementById("red"); var rd = window.getComputedStyle(red).getPropertyValue("opacity"); var green = document.getElementById("green"); if (rd == 0) { green.style.height = "200px"; } 

 #red { width: 50px; height: 50px; background: red; opacity: 0; } #green { width: 50px; height: 50px; background: green; } 

 <div id="red">Red</div> <div id="green">Green</div> 

Answer 2

看起來您正在顯式設置不透明度。 下面的代碼應該工作：

if(red.style.opacity == 0){
   green.style.height = "200px";
}