Mit JavaScript CSS-Änderungen vornehmen

[ScriptChaos]

Hey,

Ich habe in CSS eine BOX definiert

#BOX{
...
width:20px;
height:20px;
...

}

nun möchte ich mit Hilfe von JS auf die Werte width und height zugreifen und ändern.

Mein Ansatz sieht wie folgt aus

document.getElementById("box").blabla

nur weiss ich nicht, ob das geht, und wenn, wie es geht.

Vielleicht habt ihr ja eine Idee oder eine Internetseite wo ich das mal nachlesen könnte.

[aeris]

Hallo,

mit JQuery geht das recht reinfach.

.css() – jQuery API

[ChrisB]

Ändern: SELFHTML: JavaScript / Objektreferenz / style
Lesender Zugriff geht nur bei Werten, die vorher auch darüber oder per style-Attribut gesetzt wurden - für andere Fälle getComputedStyle (googlen).

[ScriptChaos]

Hallo,

mit JQuery geht das recht reinfach.

.css() – jQuery API

Mhm, wenn ich den Text richtig verstanden habe (mein Englisch ist recht mies ), dann sollte es doch eigentlich so gehen oder?

$("box").css("height") = 200 px;

oder so

$("#box").height("20px");

Allerdings tut sich da nichts.

[aeris]

$('#BOX').css("width", "200px");

JQuery einbinden nicht vergessen

[ChrisB]

$("box").css("height") = 200 px;

Allerdings tut sich da nichts.

Doch, da tut sich ganz sicher was - in der Fehlerkonsole.
Lerne, diese zu nutzen!


Der Wert, den du zuweist, ist ungültig - und danach kommt noch ein px, was an der Stelle einen Syntaxfehler auslöst.

[ScriptChaos]

Ja meine Fehlerkonsole sagt:

$ is not defined

[aeris]

Um JQuery nutzen zu können musst du es auch einbinden.

Schau dir diesen Link mal an:
http://www.very-clever.com/jquery-tutorial.php

Solltest du JQuery nicht nutzen und es mit "reinem" JS lösen wollen hilft dir der Link auf SelfHTML von ChrisB weiter.

[ScriptChaos]

Um JQuery nutzen zu können musst du es auch einbinden.

Schau dir diesen Link mal an:
jQuery Tutorial - Die Grundlagen

Solltest du JQuery nicht nutzen wollen und es mit "reinem" JS lösen wollen hilft dir der Link auf SelfHTML von ChrisB weiter.

Ahhh danke, jtz bin ich schonmal weiter. Ich habe jquery nun eingebunden. Die Fehlerkonsole ist nun auch leer, allerdings tut sich immernoch nichts. Mein Code sieht momentan so aus:

<script type="text/javascript" src="jquery.js">
$('#Box').css("height","200px");
</script>

und das ist die Box

#Box {
	position:relative;
	left:65px;
	top:227px;
	width:500px;
	height:20px;
	z-index:1;
	border:1;
	border-color:#FFF;
	padding:10px;
	display:marker;
	border: 3px solid #ffffff;
}

[aeris]

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('#Box').css("height","200px");
 });
</script>

[ChrisB]

Abgesehen von aeris' Hinweis - du musst ggf. erst abwarten, bis die Elemente existieren - ist auch das falsch:

<script type="text/javascript" src="jquery.js">
$('#Box').css("height","200px");
</script>

Es wird entweder der JS-Code, der im src-Attribut angegeben ist, ausgeführt, oder der als Elementinhalt angegebene - beides zusammen unterstützen aktuelle Browser nicht.

Also in zwei Script-Elemente aufteilen.

[ScriptChaos]

Vielen Vielen Dank,

es hat 1A geklappt, wieder etwas gelernt

[aeris]

@ChrisB
hatte ich innerhalb von 1-2 Minuten berichtigt (Flüchtigkeitsfehler), unsere Beiträge haben sich wohl überschnitten.

[Gast]

Du kannst auch direkt Zahlen an die Funktion übergeben. Allerdings muss man darauf achten, dass der Rückgabewert immer inkl. Einheit ist, man muss also noch parseInt darauf anwenden, wenn man damit rechnen will.