本帖最后由 王睿 于 2012-2-19 09:05 编辑
这是看毕老师课程写的代码,只能实现部分效果,不能连续改变文字效果,我找了半天找不出问题。请大家帮忙。- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <style type="text/css">
- #cssid{
- height:100px;
- width:300px;
- background-color:#09F;
- text-align:center;
- line-height:100px;
- }
- #textid{
- background-color:#FF0;
- width:300px;
- }
- </style>
- <script type="text/javascript">
- function change()
- {
- var selNode = document.getElementById("selid");
- var value = selNode.options[selNode.selectedIndex].value;
- //alert(value);
- var divNode1 = document.getElementById("cssid");
- var divNode2 = document.getElementById("textid");
-
- divNode1.style.textTransform = value;
- divNode2.innerText = "text-transform:"+value+";";
- }
- </script>
- </head>
- <body>
- <div id="cssid">
- Good good study,Day day up!
- </div>
- <p></p>
- <select id="selid" onchange="change()">
- <option value="none">选择文字效果</option>
- <option value="capitalize">首字母大写</option>
- <option value="uppercase">所有字母大写</option>
- <option value="lowercase">所有字母小写</option>
- </select>
- <p></p>
- <div id="textid">
- text-transform:none;
- </div>
- </body>
- </html>
复制代码 |
|