Mit JavaScript CSS-Änderungen vornehmen

ScriptChaos · 29.07.2010, 19:25

Hey,

Ich habe in CSS eine BOX definiert

Code:

#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

Code:

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 · 29.07.2010, 19:27

Hallo,

mit JQuery geht das recht reinfach.

.css() – jQuery API

ChrisB · 29.07.2010, 19:32

Ä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 · 29.07.2010, 19:34

Zitat:

Zitat von aeris

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?

Code:

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

oder so

Code:

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

Allerdings tut sich da nichts.

aeris · 29.07.2010, 19:39

Code:

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

JQuery einbinden nicht vergessen

ChrisB · 29.07.2010, 19:40

Zitat:

Zitat von ScriptChaos

Code:

$("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 · 29.07.2010, 19:42

Ja meine Fehlerkonsole sagt:

$ is not defined

aeris · 29.07.2010, 19:47

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 · 29.07.2010, 19:51

Zitat:

Zitat von aeris

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:

Code:

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

und das ist die Box

Code:

#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 · 29.07.2010, 19:52

Code:

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

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
timing Probleme bzw Zusammenspiel PHP Javascript	thica	PHP Tipps 2009	2	19.02.2010 19:06
[Erledigt] Ersatz für Javascript	Mort1ferus	JavaScript, Ajax und mehr	6	12.10.2009 09:35
Wie lade ich ein Javascript nach einer AJAX Abfrage neu?	da.eXecutoR	JavaScript, Ajax und mehr	3	21.09.2009 11:15
[Erledigt] Ist das ok, wenn eine Webseite nur in PHP ist und komplett auf JavaScript	coffeyn	Off-Topic Diskussionen	15	21.08.2009 15:11
[Erledigt] JavaScript Weiche bei Formular?	markus228	JavaScript, Ajax und mehr	1	09.08.2009 14:16
[Erledigt] Variable von Javascript mit 1x1px-Bild an PHP übergeben	beneblack	PHP Tipps 2009	18	03.05.2009 22:40
JS: Einführung - Javascript im Schichtenmodell	nikosch	Tutorials	4	11.04.2009 17:06
1101: 10x JavaScript und kein Ende ist abzusehen…	Nikolaus 2.0	Adventskalender 2008	9	13.12.2008 20:11
Lange Verarbeitungszeiten - Zuviel JavaScript?	[-UFO-]Melkor	HTML, Usability und Barrierefreiheit	2	15.06.2007 23:54
PHP + Javascript + MYSQL	socke	PHP Tipps 2006	4	02.04.2006 22:02
Variable wird geändert bei Übergabe an Javascript		PHP Tipps 2007	4	17.12.2005 16:53
JavaScript in JavaScript geschriebene Html-Datei einbinden.	woods	HTML, Usability und Barrierefreiheit	6	06.09.2004 18:33
Javascript		HTML, Usability und Barrierefreiheit	5	31.08.2004 18:30
php + Javascript, Variablenübergabe		PHP Tipps 2004	14	28.07.2004 15:42

29.07.2010, 19:25
ScriptChaos Benutzer Registriert seit: 29.07.2010 Beiträge: 40 PHP-Kenntnisse: Anfänger	Mit JavaScript CSS-Änderungen vornehmen Hey, Ich habe in CSS eine BOX definiert Code: #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 Code: 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.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

29.07.2010, 19:27
aeris Benutzer Registriert seit: 24.07.2010 Beiträge: 91 PHP-Kenntnisse: Fortgeschritten	Hallo, mit JQuery geht das recht reinfach. .css() – jQuery API

29.07.2010, 19:32
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Ä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). __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

29.07.2010, 19:39
aeris Benutzer Registriert seit: 24.07.2010 Beiträge: 91 PHP-Kenntnisse: Fortgeschritten	Code: $('#BOX').css("width", "200px"); JQuery einbinden nicht vergessen

29.07.2010, 19:42
ScriptChaos Benutzer Registriert seit: 29.07.2010 Beiträge: 40 PHP-Kenntnisse: Anfänger	Ja meine Fehlerkonsole sagt: $ is not defined

29.07.2010, 19:47
aeris Benutzer Registriert seit: 24.07.2010 Beiträge: 91 PHP-Kenntnisse: Fortgeschritten	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.

29.07.2010, 19:52
aeris Benutzer Registriert seit: 24.07.2010 Beiträge: 91 PHP-Kenntnisse: Fortgeschritten	Code: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#Box').css("height","200px"); }); </script>