JavaScript的變化高度基於元素的高度

我需要設置等於div的高度的元素，其基於元素高度的變化裏面JavaScript的變化高度基於元素的高度

我做了這個javascript代碼的高度，但它不工作。

它有什麼問題？

HTML

<div id="a" onclick="changeHeight();"> 
</div> 
<div id="button"> 
</div>

JAVASCRIPT

function changeHeight() { 
var divHeight = $("#a").height(); 
document.getElementById('button').style.height = divHeight; 
}

CSS

#a{width:300px;height:100px;background-color:black;} 
#button{width:300px;background-color:green;}

來源

2016-10-24 Marwane

查看https://stackoverflow.com/questions/10976700/how-to-set-the-height-of-an-button-input-element-on-webkit-browsers – neuhaus

你的小提琴第一次拋出一個錯誤，單擊元素時未定義changeHeight' - 因爲您在加載時將腳本代碼嵌入小提琴中，所以您需要將它放在頭部。然後下一個錯誤當然是'$'，因爲你忽略了實際嵌入jQuery。 – CBroe

更新小提琴：https://jsfiddle.net/sne40vh1/3/

主要的問題是，你試圖設置的#button高度不一個度量單位（jQuery的.height方法只返回一個值，不測量），所以當你試圖在香草JavaScript中設置樣式時，它需要一個度量單位，這是失敗的（所以在這種情況下，它會需要'300px'，但你只是給它'300'。

我已經在這裏改變它有一個全局函數（這是不推薦的，我只是這樣做的小提琴工作），並改變了你設置的高度#button的方式，以符合你的方式的#a高度：

HTML：

<div id="a" onclick="changeHeight()"></div> 
<div id="button"></div>

CSS：

#a{width:300px;height:100px;background-color:black;} 
#button{width:300px;background-color:green;}

JS：

changeHeight = function() { 
    var divHeight = $("#a").height(); 
    $('#button').height(divHeight); 
}

隨意比較我爲了更好地瞭解自己的變化而首先完成的工作。

來源

2016-10-24 11:37:28 DibsyJr

做'px'（單位）串聯

function changeHeight() { 
 
    var divHeight = $("#a").height(); 
 
    document.getElementById('button').style.height = divHeight + 'px'; 
 
}

#a { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: black; 
 
} 
 
#button { 
 
    width: 300px; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="a" onclick="changeHeight();"></div> 
 
<div id="button"></div>

來源

2016-10-24 11:30:33 Rayon

你爲什麼混合jQuery和香草的js？我寫的完全jQuery和它看起來像它的工作：

function changeHeight() { 
 
    var divHeight = $("#a").height(); 
 
    $('#button').height(divHeight); 
 
}

#a{width:300px;height:100px;background-color:black;} 
 
#button{width:300px;background-color:green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="a" onclick="changeHeight();"> 
 
</div> 
 
<div id="button"> 
 
</div>

來源

2016-10-24 11:31:14

JavaScript的變化高度基於元素的高度

回答

相關問題