login  Naam:   Wachtwoord: 
Registreer je!
 Forum

javascript style aanpassen

Offline Emonk - 22/12/2010 11:08
Avatar van EmonkLid Hallo allemaal,

Met de volgende code:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="divje" style="background-color: #000;color:#fff;">Blabla</div>
  2. <script language="JavaScript">
  3. function change() {
  4.    document.getElementById('divje').style='background-color:#fff;color:#000;';
  5. }

wilde ik maken dat met een functie de stijl van een div kan worden aangepast. echter, javascript kan dat niet met .style. Waarmee wel?

10 antwoorden

Gesponsorde links
Offline valles10 - 22/12/2010 11:11
Avatar van valles10 HTML interesse je moet het anders doen:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. document.getElementById('divje').style.backgroundColor = "#fff";
  2. document.getElementById('divje').style.color = "#000";
Bedankt door: Emonk
Offline Emonk - 22/12/2010 11:18 (laatste wijziging 22/12/2010 11:20)
Avatar van Emonk Lid Dank je, maar dat is nog niet helemaal wat ik zoek. Ik zal de echte code geven (want dat was slechts een voorbeeld):

js en php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript">

  2. document.open();

  3. for (a=1;a<5;a++) {

  4. 	for (b=1;b<5;b++) {

  5. 		c=a-1;

  6. 		d=b-1;

  7. 		document.write('<div id="'+a+','+b+'" style="background-color:#000;width:1px;height:1px;top:'+d+'px;left:'+c+'px;position:absolute;"></div>');

  8. 	}

  9. }

  10. </script>

  11. <?php

  12. 	for ($b=1;$b<5;$b++) {

  13. 		for ($c=1;$c<5;$c++) {

  14. 			echo '<script language="JavaScript">';

  15. 				echo 'document.getElementById(\''.$b.','.$c.'\').style.backgroundColor=\'#fff\';';

  16. 			echo '</script>';

  17. 		}

  18. 	}

  19. ?>


De bedoeling is dus dat de achtergrond van de divs die bij JS zijn ingesteld mbv PHP&JS wordt gewijzigd. Dit doet echter helemaal NIETS...
Offline valles10 - 22/12/2010 11:20
Avatar van valles10 HTML interesse hier heb je toch geen js nodig? Doe het toch gewoon allemaal met php?

Vertel eens wat je wilt bereiken.
Offline Emonk - 22/12/2010 11:24 (laatste wijziging 24/12/2010 10:35)
Avatar van Emonk Lid Ik heb een 3D-array met daarin voor bepaalde frames per x- en y-coördinaat een achtergrondwaarde.
de bedoeling is dat de divs worden aangepast zodat er een soort van film komt. namelijk de film van de pixels aangegeven in de array.

Zoals je ziet doe ik nog niets met de header maar alleen met de contents

De echte gehele code is hieronder te zien:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. 	$file = "::HEADER::;
  3. filename: 'test';
  4. author: 'Camil Staps';
  5. description: '';
  6. date: '22/12/2010 9:21';
  7. width: 4;
  8. height: 4;
  9. fps: 4;
  10. ::CONTENTS::;
  11. /000/000/000/000;
  12. /000/000/000/000;
  13. /000/000/000/000;
  14. /000/000/000/000;
  15. /f00/b00/800/400;
  16. /0f0/0b0/080/040;
  17. /00f/00b/008/004;
  18. /fff/bbb/888/444;
  19. /fff/bbb/888/444;
  20. /f00/b00/800/400;
  21. /0f0/0b0/080/040;
  22. /00f/00b/008/004;
  23. /00f/00b/008/004;
  24. /fff/bbb/888/444;
  25. /f00/b00/800/400;
  26. /0f0/0b0/080/040;
  27. --END--;";
  28. 	$file = str_replace("
  29. ","<br>",$file);
  30. 	$contents = strstr($file,"::CONTENTS::;");
  31. 	$contents = strstr($contents,"/");
  32. 	$contents = strrev($contents);
  33. 	$contents = strstr($contents,">rb<");
  34. 	$contents = strstr($contents,";");
  35. 	$contents = strrev($contents);
  36. 	$lines = explode(";<br>",$contents);
  37.  
  38. 	$b=0;
  39. 	$c=0;
  40. 	for ($a=0;$a<16;$a++) {
  41. 		if ($b==4) {
  42. 			$c++;
  43. 			$b=0;
  44. 		}
  45. 		$lines2[$c][$b]=str_replace(";","",$lines[$a]);
  46. 		$b++;
  47. 	}
  48. 	for ($a=0;$a<4;$a++) {
  49. 		for ($b=0;$b<4;$b++) {
  50. 			$frame[$a][$b]=explode("/",$lines2[$a][$b]);
  51. 			for ($c=0;$c<4;$c++) {
  52. 				$d=$c+1;
  53. 				$frame[$a][$b][$c]=$frame[$a][$b][$d];
  54. 			}
  55. 		}
  56. 	}
  57. ?>
  58. <script language="JavaScript">
  59. document.open();
  60. for (a=1;a<5;a++) {
  61. 	for (b=1;b<5;b++) {
  62. 		c=a-1;
  63. 		d=b-1;
  64. 		document.write('<div id="'+a+','+b+'" style="background-color:#000;width:1px;height:1px;top:'+d+'px;left:'+c+'px;position:absolute;"></div>');
  65. 	}
  66. }
  67. </script>
  68. <?php
  69. for ($a=0;$a<4;$a++) {
  70. 	for ($b=1;$b<5;$b++) {
  71. 		for ($c=1;$c<5;$c++) {
  72. 			echo '<script language="JavaScript">';
  73. 				echo 'document.getElementById(\''.$b.','.$c.'\').style.backgroundColor=\'#'.$frames[$a][$b][$c].'\';';
  74. 			echo '</script>';
  75. 		}
  76. 	}
  77. }
  78. ?>


Wat het nu doet? Niets... behalve: je ziet een zwart 4x4 vierkantje..
Offline Ibrahim - 25/12/2010 18:43
Avatar van Ibrahim PHP expert De style attribute in Javascript is geen string, maar een object. Dat object heeft verschillende attributen die dan de stijleigenschappen bevatten. Wil je een stijleigenschap gebruiken, dan is de juiste syntax:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. document.getElementById('id-attribuut').style.<stijleigenschap_naam> = '<nieuwe waarde>';


Heeft jou stijleigenschap een naam dat een samengestelde woord is, zoals background-color, dan moet je voor <stijleigenschap_naam> camelCaps gebruiken:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. document.getElementById('<id-attribuut').style.backgroundColor = '<nieuwe waarde>';
Offline Emonk - 26/12/2010 18:18
Avatar van Emonk Lid Dankjewel,

Ik heb met deze code eens wat geprobeerd:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="groen" OnClick="muis()">Dit is een tekst</div>
  2. <style type="text/css">
  3. 	div#groen {
  4. 		background-color: 	#00aa00;
  5. 		color:				#ffffff;
  6. 		display: 			inline;
  7. 	}
  9. <script language="JavaScript">
  10. 	function muis() {
  11. 		document.getElementById('groen').style.backgroundColor=#000000;
  12. 		document.getElementById('groen').style.color=#ff0000;
  13. 	}


En dit werkt NIET, ookal zou het volgens jullie (toch?) moeten worden dat als je met de muis over de div gaat de kleuren zwart en rood ipv groen en wit worden...
Offline WouterJ - 26/12/2010 19:50 (laatste wijziging 26/12/2010 20:03)
Avatar van WouterJ HTML gevorderde Je hebt nu:
<div id="groen" onClick="">

onClick betekend als je erop klikt. Je bedoelt hover. Daar heb je er 2 van: onMouseOver, onMouseOut. En je hebt OnClick dit is niet goed je moet of onClick of onclick hebben.

Verder is language een oud attribuut en schrijf je javascript gewoon zonder hoofdletters. Je moet tegenwoordig type="text/javascript" gebruiken.

[EDIT]
onMouseOver gaat ook niet werken omdat het een div is. onMouseOver kan niet op divs wel op anchor (<a>) of image (<img>) tags.
Dit slaat nergens meer op, is alleen lang niet meer zo... 
Offline Emonk - 26/12/2010 19:54
Avatar van Emonk Lid Oke, maar nu werkt het nog niet...
Offline WouterJ - 26/12/2010 20:02
Avatar van WouterJ HTML gevorderde Oeps, was door die kleine dingen de grootste fout vergeten:
De kleuren moeten tussen quotes ( " of ')
Offline Emonk - 26/12/2010 20:09 (laatste wijziging 27/12/2010 08:35)
Avatar van Emonk Lid aha...

met mijn probeerseltje lukt het nu:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="groen" OnClick="muis()">Dit is een tekst</div>
  2. <style type="text/css">
  3. 	div#groen {
  4. 		background-color: 	#00aa00;
  5. 		color:				#ffffff;
  6. 		display: 			inline;
  7. 	}
  9. <script language="JavaScript">
  10. 	function muis() {
  11. 		document.getElementById('groen').style.backgroundColor="#000000";
  12. 		document.getElementById('groen').style.color="#ffff00";
  13. 	}


(niet zeuren over onclick, OnClick of onClick)

Maar voor de andere code werkt het nog niet:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. 	$file = "::HEADER::;
  3. filename: 'test';
  4. author: 'Camil Staps';
  5. description: '';
  6. date: '22/12/2010 9:21';
  7. width: 4;
  8. height: 4;
  9. fps: 4;
  10. ::CONTENTS::;
  11. /000/000/000/000;
  12. /000/000/000/000;
  13. /000/000/000/000;
  14. /000/000/000/000;
  15. /f00/b00/800/400;
  16. /0f0/0b0/080/040;
  17. /00f/00b/008/004;
  18. /fff/bbb/888/444;
  19. /fff/bbb/888/444;
  20. /f00/b00/800/400;
  21. /0f0/0b0/080/040;
  22. /00f/00b/008/004;
  23. /00f/00b/008/004;
  24. /fff/bbb/888/444;
  25. /f00/b00/800/400;
  26. /0f0/0b0/080/040;
  27. --END--;";
  28. 	$file = str_replace("
  29. ","<br>",$file);
  30. 	$contents = strstr($file,"::CONTENTS::;");
  31. 	$contents = strstr($contents,"/");
  32. 	$contents = strrev($contents);
  33. 	$contents = strstr($contents,">rb<");
  34. 	$contents = strstr($contents,";");
  35. 	$contents = strrev($contents);
  36. 	$lines = explode(";<br>",$contents);
  37.  
  38. 	$b=0;
  39. 	$c=0;
  40. 	for ($a=0;$a<16;$a++) {
  41. 		if ($b==4) {
  42. 			$c++;
  43. 			$b=0;
  44. 		}
  45. 		$lines2[$c][$b]=str_replace(";","",$lines[$a]);
  46. 		$b++;
  47. 	}
  48. 	for ($a=0;$a<4;$a++) {
  49. 		for ($b=0;$b<4;$b++) {
  50. 			$frame[$a][$b]=explode("/",$lines2[$a][$b]);
  51. 			for ($c=0;$c<4;$c++) {
  52. 				$d=$c+1;
  53. 				$frame[$a][$b][$c]=$frame[$a][$b][$d];
  54. 			}
  55. 		}
  56. 	}
  57. ?>
  58. <script language="JavaScript">
  59. document.open();
  60. for (a=1;a<5;a++) {
  61. 	for (b=1;b<5;b++) {
  62. 		c=a-1;
  63. 		d=b-1;
  64. 		document.write('<div id="'+a+','+b+'" style="background-color:#000;width:1px;height:1px;top:'+d+'px;left:'+c+'px;position:absolute;"></div>');
  65. 	}
  66. }
  68. <?php
  69. for ($a=0;$a<4;$a++) {
  70. 	for ($b=1;$b<5;$b++) {
  71. 		for ($c=1;$c<5;$c++) {
  72. 			echo '<script language="JavaScript">';
  73. 				echo 'document.getElementById(\''.$b.','.$c.'\').style.backgroundColor="\'#fff\'";';
  74. 			echo '</script>';
  75. 		}
  76. 	}
  77. }
  78. ?>
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.195s