Jump to content

Using JS to manipulate CSS properties

Recommended Posts

Good Day,I'm learning JS and CSS; to practice, I wrote a function to loop thru all rgb values and assign them to the backgroundColor property of a div:

<script type=text/javascript><html><head><script type="text/javascript">function cs (){  var obj = document.getElementById('t');  var tmp = ["0", "0", "0"];  var a = tmp[0];  var b = tmp[1];  var c = tmp[2];  var clr;   for (i=0; i<256; i++){     a = i;     for (j=0; j<256; j++){        b = j;        for (k=0; k<256; k++){           c = k;           clr = "rgb(" + a + ", " + b + ", " + c + ")";            obj.style.backgroundColor = clr;         } // end of k     } // end of j  } // end of i   alert (clr); // just to c if it worked} // end of function div{ background-color:#b0c4de;}</script><style type="text/css">div{ background-color:#b0c4de;}</style></head><body><div id="t">       This is a text inside a div element.</div><input type="button" value="color" onClick="cs();"></body></html>

This snippet seems to work, albeit very slowly.Here are my questions:

  1. Is the code ok? If I use other values for the loop variables, it doesn't seem to work.
  2. I put an alert() right b4 the color assignment just to see if the loop works. I used <100 as the break condition and incremented the loop variables by 10. Strange thing happened:the loop repeated itself! The alert box would show (90, 90, 90) and then starts from "0" again.What could be causing this?
  3. What is a better alternative for displaying the loop variables while it's looping? document.write() overrides the whole page and stops the loop. I'd like something like:"now displaying the color value abc" to be shown without interrupting the count.

Thank you and a good weekend.

Link to post
Share on other sites

why not just use loop variables? store the values and then display using innerhtml within a div at end of loops.

<script type="text/javascript">/*<![CDATA[*//*---->*/function cs (){var obj = document.getElementById('t');var rgb_code=document.getElementById('rgb_values');//var tmp = ["0", "0", "0"];//var a = tmp[0];//var b = tmp[1];//var c = tmp[2];var clr;var store_values="";for (i=0; i<=250; i+=10)	{	for (j=0; j<=250; j+=10)		{		for (k=0; k<=250; k+=10)			{		clr = "rgb(" + i + ", " + j + ", " + k + ")";		obj.style.backgroundColor = clr;				store_values+=clr+"<br />";			} // end of k		} // end of j	} // end of irgb_code.innerHTML=store_values;alert (clr); // just to c if it worked} // end of function/*--*//*]]>*/</script><div id="t">This is a text inside a div element.</div><input type="button" value="color" onClick="cs();"><div id="rgb_values"></div>

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...