JavaScript Tutorial/Style

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

div.style.fontFamily="Verdana";

   <source lang="javascript">

<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>


div.style.fontSize="2em";

   <source lang="javascript">

<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>


div.style.fontSize="larger";

   <source lang="javascript">

<html> <head> <title>PrettyPretty</title> <script type="text/javascript"> function bigger() {

 var div = document.getElementById("div1");
 div.style.fontSize="larger";
 div.style.letterSpacing="10px";
 div.style.textAlign="justify";
 div.style.textTransform="uppercase";
 div.style.fontSize="xx-large";
 div.style.fontWeight="900";
 div.style.lineHeight="40px";

} function smaller() {

  var div = document.getElementById("div1");
  div.style.fontSize="smaller";
  div.style.letterSpacing="normal";
  div.style.textAlign="left";
  div.style.textTransform="none";
  div.style.fontSize="medium";
  div.style.fontWeight="normal";
  div.style.lineHeight="normal";

} </script> </head> <body> <a href="javascript:bigger();">bigger</a> <a href="javascript:smaller();">smaller</a>

p1

p2

</body> </html></source>


div.style.fontWeight="900";

   <source lang="javascript">

<html> <head> <title>PrettyPretty</title> <script type="text/javascript"> function bigger() {

 var div = document.getElementById("div1");
 div.style.fontSize="larger";
 div.style.letterSpacing="10px";
 div.style.textAlign="justify";
 div.style.textTransform="uppercase";
 div.style.fontSize="xx-large";
 div.style.fontWeight="900";
 div.style.lineHeight="40px";

} function smaller() {

  var div = document.getElementById("div1");
  div.style.fontSize="smaller";
  div.style.letterSpacing="normal";
  div.style.textAlign="left";
  div.style.textTransform="none";
  div.style.fontSize="medium";
  div.style.fontWeight="normal";
  div.style.lineHeight="normal";

} </script> </head> <body> <a href="javascript:bigger();">bigger</a> <a href="javascript:smaller();">smaller</a>

p1

p2

</body> </html></source>


Set font color with form control

   <source lang="javascript">

<html> <head>

 <script type="text/javascript">
   function showWindow() {
     var txt = document.form1.stringField.value;
     var clr = "";
     clr = document.form1.colorList.options[document.form1.colorList.options.selectedIndex].text;
     txt = txt.fontcolor(clr);
     objWindow = window.open("", "","width=600,height=300");
     objWindow.document.write(txt);
     objWindow.document.close();
 }
 </script>

</head> <body>

 <form method="post" name="form1" action="null">
     String:<input type="text" size="40" maxlength="256" name="stringField" />
     Color:
     <select name="colorList" size="1">
       <option selected="selected">black</option>
       <option>green</option>
       <option>red</option>
     </select>
   <input type="button" name="Show" value="Show" onclick="showWindow()" />
 </form>

</body> </html></source>


Set font size with form control

   <source lang="javascript">

<html> <head>

 <script type="text/javascript">
   function showWindow() {
     var txt = document.form1.stringField.value;
     var sze = "";
     sze = document.form1.sizeList.options[document.form1.sizeList.options.selectedIndex].text;
     txt = txt.fontsize(sze);
     objWindow = window.open("", "","width=600,height=300");
     objWindow.document.write(txt);
     objWindow.document.close();
 }
 </script>

</head> <body>

 <form method="post" name="form1" action="null">
     String:<input type="text" size="40" maxlength="256" name="stringField" />
     Size:
     <select name="sizeList" size="1">
       <option selected="selected">1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
       <option>5</option>
       <option>6</option>
       <option>7</option>
     </select>
   <input type="button" name="Show" value="Show" onclick="showWindow()" />
 </form>

</body> </html></source>