打印本文 打印本文 关闭窗口 关闭窗口
js动态设置网页文字颜色、字体样式的示例代码
作者:武汉SEO闵涛  文章来源:敏韬学习网  点击数2600  更新时间:2010/6/23 22:55:06  文章录入:mintao  责任编辑:mintao

  以下代码的功能是,动态修改网页文字的颜色、字体样式

  代码放于两个位置,一个是JS代码,放在Head之后Body之前。

  此外,文本内容放在body的DIV中。

  <html>
  <head> <title>文字变色、变字体</title>
  </head>
  <script>
  function changeColor() 
  { 
   var title = document.getElementById("title").value; 
   var select = document.getElementById("selector").value; 
   if(select=="two") 
   { 
          document.getElementById("title").style.color="green";  
      } 
      else document.getElementById("title").style.color="red"; 
  } 

  function changeStyle() 
  {  
  var title = document.getElementById("title").value; 
  var select = document.getElementById("selector2").value; 
  if(select=="two") 
  { 
   document.getElementById("title").style.fontFamily="Times New Roman";  
  } 
  else 
   document.getElementById("title").style.fontFamily="隶书"; 
  } 
  </script>

  <body>
   <div id="title">大众计算机学习网</div><br>
   <select name="selector" id="selector" onchange="changeColor()">
          <option value="one">红色 </option>
          <option value="two">绿色 </option>
   </select>
   <select name="selector2" id="selector2" onchange="changeStyle()">
          <option value="one">隶书 </option>
          <option value="two">楷体 </option>
   </select>
  </body>
  </html>

  简单的方法就是,将如上代码直接复制粘贴到你的测试Web,进行浏览,效果就出来了。以上代码仅是一种示例,您完全可以根据自己的需要,修改如上代码,让其功能更加完善。

打印本文 打印本文 关闭窗口 关闭窗口