六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

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

Admin | 2010-3-9 19:27:00 | ReadNums | 18867 | 标签 网页制作 | 打印本页
     

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

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


问题未解决:在线咨询

云顶国际445

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日