2011-11-24 18 views
12

मैं क्या गलत करता हूं? क्यों 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

आप jQuery से परिचित हो जाना चाहिए, यह बातें रास्ता आसान बना देता है। :) www.jquery.com – odaa

उत्तर

24

बस एक मूर्खतापूर्ण गलती उपयोग उद्धरण ('') में '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> 

9

यह करें:

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

1

आप एक स्ट्रिंग मान के रूप में ऊंचाई निर्धारित करने के लिए जब आप पिक्सेल का उपयोग कर सकते है।

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

इंटरनेट एक्सप्लोरर के लिए अपने एचटीएमएल में एक डॉक्टरेट जोड़ने का भी प्रयास करें।

<!DOCTYPE html> 
<html> ... 
-1

बस 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> 
0

तुम बस उद्धरण भूल गया। इसके अनुसार अपना कोड बदलें:

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

काम करना चाहिए।

1

देखो vwphillips करने पर '2010/03/06 से पोस्ट, 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> 

यह मेरे लिए काम करता है :)

रहें सेंट संबंध है!

+0

ध्यान दें कि [केवल-लिंक उत्तर] (http://meta.stackoverflow.com/tags/link-only-answers/info) निराश हैं, इसलिए SO का उत्तर अंत बिंदु होना चाहिए एक समाधान की खोज करें (बनाम अभी तक संदर्भों का एक और स्टॉपओवर, जो समय के साथ पुराना हो जाता है)। लिंक को संदर्भ के रूप में रखते हुए, यहां स्टैंड-अलोन सारांश जोड़ना पर विचार करें। – kleopatra

+0

मैं अपना जवाब अपडेट करूंगा ... धन्यवाद @ क्लेओपेट्रा! :) – mailazs

0

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>

संबंधित मुद्दे