nicht angemeldet
Größe verändern
0 
Gunnar Bittersmann
0 0 
Der Martin
Größe verändern
Hallo,
ich möchte per js die Größe eines <div> verändern. Habe mir folgendes gedacht:
<html>
<head>
<script type="text/javascript">
document.Testform.getElementById("ddiv").style.height = "600";
document.Testform.getElementById("ddiv").style.width = "600";
</script>
</head>
<body>
<form name="Testform">
<div id="ddiv" style="height:400px; width:400px; background-color:#cccccc">
</div>
</form>
</body>
</html>
Leider läuft's nicht. Wie bekommt man das hin?
Danke,
Paul
-
Hello out there!
document.Testform.getElementById("ddiv").style.height = "600";
document.Testform.getElementById("ddiv").style.width = "600";<div id="ddiv" style="height:400px; width:400px; background-color:#cccccc">
Vergleiche mal diese drei Zeilen ...
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen) -
Ersetze document.Testform.getElementById("ddiv").style.width = "600";
durch document.getElementById("ddiv").style.width = "600";.-
Danke.
Aber die Folge ist:Objekt erforderlich
Paul
-
<html>
<head>
<script type="text/javascript">
function bla(){
document.getElementById("ddiv").style.height = "600px";
document.getElementById("ddiv").style.width = "600px";
}
</script>
</head>
<body>
<form name="Testform">
<div id="ddiv" onclick="bla()" style="height:400px; width:400px; background-color:#cccccc">
</div>
</form>
</body>
</html>Sollte funktionieren. Wenn du in das div klickst verändert sich die Grösse.
-
Es liegt daran, dass das DIV oben im JavaScript noch nicht "bekannt" ist
und der Aufruf deshalb fehlschlägt. -
Hallo Perro.
<html>
<head>
<script type="text/javascript">
function bla(){
document.getElementById("ddiv").style.height = "600px";
document.getElementById("ddiv").style.width = "600px";
}
</script>
</head>
<body>
<form name="Testform">
<div id="ddiv" onclick="bla()" style="height:400px; width:400px; background-color:#cccccc">
</div>
</form>
</body>
</html>Mein Vorschlag:
<head> <title>Foo</title> <script type="text/javascript"> [code lang=javascript]window.onload = function() { document.getElementById('ddiv').onclick = function() { this.style.height = '600px'; this.style.width = '600px'; }; };</script>
</head>
<body>
<div id="ddiv" style="height:400px; width:400px; background-color:#cccccc">Bar</div>
</body>[/code]Oder noch besser in klassenbasierter Fassung:
<head> <title>Foo</title> <style type="text/css"> [code lang=css]#ddiv { background-color:#ccc; height:400px; width:400px; } .groesser { height:600px; width:600px; }</style>
<script type="text/javascript">~~~javascript window.onload = function() {
document.getElementById('ddiv').onclick = function() {
this.className = 'groesser';
};
};
</script> </head> <body> <div id="ddiv">Bar</div> </body>[/code] Einen schönen Montag noch. Gruß, Ashura -- sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:| „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“ [[HTML Design Constraints: Logical Markup](http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/HTMLConstraints.html)]
-
-
-
-
Hallo,
document.Testform.getElementById("ddiv").style.height = "600";
document.Testform.getElementById("ddiv").style.width = "600";Leider läuft's nicht. Wie bekommt man das hin?
beispielsweise indem man noch angibt, ob man 600 Meter, 600 Hühnerkrallen oder 600 Pixel meint. Ansonsten, wie schon erwähnt: In dem Moment, wenn das Script ausgeführt ist, existiert das angesprochene div-Element noch gar nicht, weil es erst weiter unten im Quelltext auftaucht.
Ciao,
Martin--
Wenn man keine Ahnung hat - einfach mal Fresse halten.
(Dieter Nuhr, deutscher Kabarettist)