Javascript 单击按钮时更改 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8255870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change div height on button click
提问by Jim
What I do wrong? Why div height didn't change?
我做错了什么？为什么div高度没有改变？
<html>
<head>
</head>
<body >
<button type="button" onClick = "document.getElementById('chartdiv').style.height = 200px">Click Me!</button>
<div id="chartdiv" style="width: 100%; height: 50px; background-color:#E8EDF2"></div>
</body>
</html>
回答by Ariful Islam
Just a silly mistake use quote('') in '200px'
只是一个愚蠢的错误在 '200px'
<html>
<head>
</head>
<body >
<button type="button" onClick = "document.getElementById('chartdiv').style.height = '200px';">Click Me!</button>
<div id="chartdiv" style="width: 100%; height: 50px; background-color:#E8EDF2"></div>
</body>
回答by Sudhir Bastakoti
Do this:
做这个：
function changeHeight() {
document.getElementById('chartdiv').style.height = "200px"
}
<button type="button" onClick="changeHeight();"> Click Me!</button>
回答by mailazs
Look at to vwphillips' post from 03-06-2010, 03:35 PM in http://www.codingforums.com/archive/index.php/t-190887.html
查看 vwphillips 于 2010 年 3 月 6 日下午 03:35 在http://www.codingforums.com/archive/index.php/t-190887.html发布的帖子
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function Div(id,ud) {
var div=document.getElementById(id);
var h=parseInt(div.style.height)+ud;
if (h>=1){
div.style.height = h + "em"; // I'm using "em" instead of "px", but you can use px like measure...
}
}
</script>
</head>
<body>
<div>
<input type="button" value="+" onclick="Div('my_div', 1);">
<input type="button" value="-" onclick="Div('my_div', -1);"></div>
</div>
<div id="my_div" style="height: 1em; width: 1em; overflow: auto;"></div>
</body>
</html>
This worked for me :)
这对我有用:)
Best regards!
此致！
回答by loscuropresagio
You just forgot the quotes. Change your code according to this:
你只是忘记了引号。根据此更改您的代码：
<button type="button" onClick = "document.getElementById('chartdiv').style.height = '200px'">Click Me!</button>
should work.
应该管用。
回答by Stefan
You have to set height as a string value when you use pixels.
使用像素时，必须将高度设置为字符串值。
document.getElementById('chartdiv').style.height = "200px"
Also try adding a DOCTYPE to your HTML for Internet Explorer.
还可以尝试将 DOCTYPE 添加到 Internet Explorer 的 HTML 中。
<!DOCTYPE html>
<html> ...
回答by Waruna Manjula
var ww1 = "";
var ww2 = 0;
var myVar1 ;
var myVar2 ;
function wm1(){
myVar1 =setInterval(w1, 15);
}
function wm2(){
myVar2 =setInterval(w2, 15);
}
function w1(){
ww1=document.getElementById('chartdiv').style.height;
ww2= ww1.replace("px", "");
if(parseFloat(ww2) <= 200){
document.getElementById('chartdiv').style.height = (parseFloat(ww2)+5) + 'px';
}else{
clearInterval(myVar1);
}
}
function w2(){
ww1=document.getElementById('chartdiv').style.height;
ww2= ww1.replace("px", "");
if(parseFloat(ww2) >= 50){
document.getElementById('chartdiv').style.height = (parseFloat(ww2)-5) + 'px';
}else{
clearInterval(myVar2);
}
}<html>
<head>
</head>
<body >
<button type="button" onClick = "wm1()">200px</button>
<button type="button" onClick = "wm2()">50px</button>
<div id="chartdiv" style="width: 100%; height: 50px; background-color:#ccc"></div>
<div id="demo"></div>
</body>回答by Miki de Arcayne
Just remove the "px" in the style.height assignation, like:
只需删除 style.height 分配中的“px”，例如：
<button type="button" onClick = "document.getElementById('chartdiv').style.height = 200px"> </button>
Should be
应该
<button type="button" onClick = "document.getElementById('chartdiv').style.height = 200">Click Me!</button>
