JavaScript Tutorial/Style

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

div.style.fontFamily="Verdana";

<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>
<div id="div1">
This is a DIV element. Click me to see the change.
</div>
</body>
</html>


div.style.fontSize="2em";

<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>
<div id="div1">
This is a DIV element. Click me to see the change.
</div>
</body>
</html>


div.style.fontSize="larger";

<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>
<div id="div1">
    <p>p1</p>
    <p>p2</p> 
</div>
</body>
</html>


div.style.fontWeight="900";

<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>
<div id="div1">
    <p>p1</p>
    <p>p2</p> 
</div>
</body>
</html>


Set font color with form control

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


Set font size with form control

<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>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Style&oldid=9029»