Dzwebs.Net

撰写电脑技术杂文十余年

js动态设置网页文字颜色、字体样式的示例代码

Admin | 2010-3-9 19:27:00 | 被阅次数 | 24058

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

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

  代码放于两个位置,一个是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,进行浏览,效果就出来了。以上代码仅是一种示例,您完全可以根据自己的需要,修改如上代码,让其功能更加完善。


该杂文来自: 网页制作杂文

上一篇:js动态修改网页文字字号大小的代码

下一篇:网页滚动字幕marquee参数及实例介绍

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计