css-font-color例子

来源：互联网发布：棋牌游戏源码怎么用编辑：程序博客网时间：2024/05/22 05:34

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css--font例子</title>
<style>
  #idDIV{
   width:100%; /*名为idDIV的宽度100%*/
   height:80px; /*名为idDIV的高度80px*/
   background-color:#ffD700; /*名为idDIV的背景色#ffd700*/
   padding:4px;   /*间隙属性：
   说明：
     检索或设置对象四边的内补丁。对于 td 和 th 对象而言默认值为 1 。
     其他对象的默认值为 0 。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
     如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。
     如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。在IE5.5+中此属性支持内联对象使用。
     而在此前的版本中，内联要素要使用该属性，必须先设定对象的 height 或 width 属性，
     或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。
     此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 padding 。
   */
   font : normal normal normal medium normal "Times New Roman" ;   /*初始化idDIV下的字体*/
  }

  #idCodeDiv{
   width:100%;
   padding:4px;
   font-family:verdana,tahoma;
   margin:12px 0px 0px 0xp;
   background-color:#EEE;
   font-weight:bold;
  }


</style>

<script>
  function rdl_change(){

   var oCodeDiv=document.all("idCodeDiv");
   var oDiv=document.all("idDiv");

  /**
  with语句 = document.all("idSel").value;
  with例子:
   with (object)
      statements
   参数
   object
   新的默认对象。
   statements
   一个或多个语句，object 是该语句的默认对象。
  说明
    with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中，请注意 Math 的重复使用：

   x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10)
   y = Math.tan(14 * Math.E)
  当使用 with 语句时，代码变得更短且更易读：

  with (Math){
    x = cos(3 * PI) + sin (LN10)
      y = tan(14 * E)
  }
  **/

   with (document.all("idSel")) {
    var sValue=options[selectedIndex].value;
   }

   oDiv.style.font=sValue;
   oCodeDiv.innerText="font:"+sValue+";";
  }

</script>
</head>

<body>
<div id="idDiv">
  Every man dies,Not every man really lives.<br/>
  请记住上面这句话。
</div>
<br/>
<select id="idSel" onchange="rdl_change();">
  <option value="normal normal normal medium normal 'Times New Roman'">---font---</option>
  <option value="italic small-caps 600 12pts/18pts 宋体">italic small-caps 600 12pts/18pts 宋体</option>
  <option value="caption">caption<option>
  <option value="icon">icon</option>
  <option value="menu">menu</option>
  <option value="message-box">message-box</option>
  <option value="small-caption">small-caption</option>
  <option value="status-bar">status-bar</option>

</select>
<br/>
<div id="idCodeDiv">font : normal normal normal medium normal "Times New Roman" ;</div>
</body>
</html>