Question

我做错了什么？为什么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>

Answer 1

在'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>

Answer 2

这样做：

function changeHeight() {
document.getElementById('chartdiv').style.height = "200px"
}
<button type="button" onClick="changeHeight();"> Click Me!</button>

Answer 3

使用像素时，必须将高度设置为字符串值。

document.getElementById('chartdiv').style.height = "200px"

还尝试在您的HTML for Internet Explorer中添加DOCTYPE。

<!DOCTYPE html>
<html> ...

Answer 4

你刚忘了引号。根据这个更改您的代码：

    <button type="button" onClick = "document.getElementById('chartdiv').style.height = '200px'">Click Me!</button>

应该有用。

Answer 5

看看vwphillips＆＃39;发表于03-06-2010,03：35 PM in 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);">&nbsp;&nbsp; 
         <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>

这对我有用：）

祝你好运！

Answer 6

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>

Answer 7

只需删除style.height分配中的“px”，例如：

<button type="button" onClick = "document.getElementById('chartdiv').style.height = 200px"> </button>

应该是

<button type="button" onClick = "document.getElementById('chartdiv').style.height = 200">Click Me!</button>

按钮单击更改div高度

7 个答案: