Изменение высоты div при нажатии кнопки

Что я делаю неправильно? Почему высота 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>

Ответ 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>

Ответ 2

Сделай это:

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

Ответ 3

Когда вы используете пиксели, вы должны установить высоту как строковое значение.

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

Также попробуйте добавить DOCTYPE в свой HTML для Internet Explorer.

<!DOCTYPE html>
<html> ...

Ответ 4

Вы просто забыли цитаты. Измените свой код в соответствии с этим:

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

должно сработать.

Ответ 5

Посмотрите на сообщение vwphillips с 03-06-2010, 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);">&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>

Это сработало для меня :)

С наилучшими пожеланиями!

Ответ 6

Просто удалите "px" в style.height assignation, например:

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

Должно быть

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

Ответ 7

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>