JavaScript DHTML/Style Layout/Color

Материал из Web эксперт
Перейти к: навигация, поиск

Assign random color to

   <source lang="html4strict">
 

<html> <head> <title>The Node</title> <script type="text/javascript"> function randomColor() {

 r=Math.floor(Math.random() * 255).toString(16);
 g=Math.floor(Math.random() * 255).toString(16);
 b=Math.floor(Math.random() * 255).toString(16);
   alert("#"+r+g+b);

} randomColor(); </script> <body onload="outputNodeProps(document)"> </body> </html>


 </source>
   
  


Body text Color

   <source lang="html4strict">
 
   

<html> <head> <script language="JavaScript">

   function function1() {
       document.all.myBody.text = "blue";
   }

</script> </head> <body id="myBody"> Some text <input type="button" value="Change to blue" onClick="function1();"> </body> </html>



 </source>
   
  


Change element color

   <source lang="html4strict">

<html> <head> <title>CSS</title> </head> <body>

The Title

The first element.

The second element.

<script type = "text/javascript" > var element1 = document.getElementById("firstelement"); element1.style.color = "#0000FF"; </script> </body> </html>

 </source>
   
  


Change text color

   <source lang="html4strict">
 

<html> <head> <title>A Simple Page</title> <script language="JavaScript"> function colorchange() {

   head1.style.color = "red";

} function colorchangeback() {

   head1.style.color = "black";

} </script> </head> <body>

Mouse mouse in!

</body> </html>


 </source>
   
  


"color" Example

   <source lang="html4strict">
 
   

<html> <body> <script language="JavaScript">

   function function1() {
      document.getElementById("myFont").color = "green";
   }
   function function2() {
      document.getElementById("myFont").color = "maroon";
   }

</script>

Sample text.

<button onClick="function1();">Make Text Green</button> <button onClick="function2();">Make Text Maroon</button> </body> </html>



 </source>
   
  


div.style.color="#fff";

   <source lang="html4strict">
 

<html> <head> <title>PrettyPretty</title> <script type="text/javascript"> document.onclick=changeElement; function changeElement() {

 var div = document.getElementById("div1");
 div.style.backgroundColor="#00f";
 div.style.width="500px";
 div.style.color="#fff";
 div.style.height="200px";
 div.style.paddingLeft="50px";
 div.style.paddingTop="50px";
 div.style.fontFamily="Verdana";
 div.style.fontSize="2em";
 div.style.border="3px dashed #ff0";
 div.style.position="absolute";
 div.style.left="200px";
 div.style.top="100px";
 div.style.textDecoration="underline";

} </script> </head> <body>

This is a DIV element. Click me to see the change.

</body> </html>


 </source>
   
  


Foreground Color Example

   <source lang="html4strict">
 
   

<html> <body> Sample Text
<button onclick="document.fgColor="red";">Red</button> <button onclick="document.fgColor="blue";">Blue</button> </body> </html>



 </source>