按鈕單擊更改div高度

我做錯了什麼？爲什麼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>

來源

2011-11-24 Jim

你應該熟悉jQuery的，它使事情比較容易的方式。 :) www.jquery.com – odaa

只是一個愚蠢的錯誤使用引號（ ''）在'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>

來源

2011-11-24 11:07:15

這樣做：

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

來源

2011-11-24 10:59:24

您必須時使用的像素設置高度爲字符串值。

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

也嘗試添加一個DOCTYPE到您的HTML爲Internet Explorer。

<!DOCTYPE html> 
<html> ...

來源

2011-11-24 11:00:35 Stefan

-1

只是刪除了「PX」在style.height分配，如：

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

應該

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

來源

2011-11-24 11:02:04

你忘記了引號。根據此更改您的代碼：

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

應該工作。

來源

2011-11-24 11:06:52 loscuropresagio

看向vwphillips'從03-06-2010後，下午3時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>

這對我有效:)

是問候！

來源

2013-12-16 17:12:43 mailazs

請注意，[鏈接只是答案]（http://meta.stackoverflow.com/tags/link-only-answers/info）不鼓勵，所以答案應該是一個終點尋找一個解決方案（而不是另一個引用的中途停留，這往往會隨着時間推移而變得陳舊）。請考慮在此添加獨立的摘要，並將鏈接保留爲參考。 – kleopatra

我將更新我的答案......謝謝@kleopatra！ :) – mailazs

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>

來源

2016-08-05 04:50:27

按鈕單擊更改div高度

回答

相關問題