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