A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6.         <script type="text/javascript" src="doctool.js"></script>
  7.     <script type="text/javascript">
  8.                 function change()
  9.                 {
  10.                         var selNode=byId("selid");
  11.                         var value1=selNode.options[selNode.selectedIndex].value;
  12.                        
  13.                         var divNode1=byId("cssid");
  14.                         var divNode2=byId("textid");
  15.                        
  16.                         divNode1.style.textTransform = value1;
  17.                         divNode2.innerText="text tranforms : "+value1+" ;";
  18.                 }
  19.         </script>
  20.     <style type="text/css">
  21.         #cssid{
  22.                 width:300px;
  23.                 height:60px;
  24.                 background:#F90;
  25.         }
  26.         #textid{
  27.                 width:300px;
  28.                 background:#999;
  29.         }
  30.         </style>
  31.    
  32. </head>

  33. <body>
  34. <div id="cssid">
  35.         Good good study, day day up!
  36. </div>
  37. <p>
  38. </p>
  39. <select id="selid" onchange="change()">
  40.         <option name="item" value="none">----text--tranforms---</option>
  41.     <option name="item" value="capitalize">首字母大写</option>
  42.     <option name="item" value="uppercase">所有字母大写</option>
  43.     <option name="item" value="lowercase">所有字母小写</option>
  44. </select>
  45. <p></p>
  46. <div id="textid">
  47. text tranform : none ;
  48. </div>

  49. </body>
  50. </html>
复制代码
我做出的页面,只有在第一次选择的时候会出来效果,一旦第二次选择,上面的文字格式就不会变了,这是问什么啊,求解答

5 个回复

倒序浏览
粘贴你的代码运行,出现了乱码显示 ??
回复 使用道具 举报
byId()这是神马函数???
document.getElementById()这样写才对吧

评分

参与人数 1技术分 +1 收起 理由
黄奕豪 + 1 以后多动点手,最起码说明在哪个地方出的吧.

查看全部评分

回复 使用道具 举报
不知道你的doctool.js是咋写的,就没用
把byId方法改成document.getElementById()后就没有问题了,看看你那个js有没有问题。
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>无标题文档</title>
  4.     <script type="text/javascript">
  5.                 function change()
  6.                 {
  7.                        
  8.                         var selNode=document.getElementById("selid");
  9.                         alert("dd");
  10.                         var value1=selNode.options[selNode.selectedIndex].value;
  11.                         
  12.                         var divNode1=document.getElementById("cssid");
  13.                         var divNode2=document.getElementById("textid");
  14.                         
  15.                         divNode1.style.textTransform = value1;
  16.                         divNode2.innerText="text tranforms : "+value1+" ;";
  17.                 }
  18.         </script>
  19.     <style type="text/css">
  20.         #cssid{
  21.                 width:300px;
  22.                 height:60px;
  23.                 background:#F90;
  24.         }
  25.         #textid{
  26.                 width:300px;
  27.                 background:#999;
  28.         }
  29.         </style>
  30. </head>
复制代码

评分

参与人数 1技术分 +1 收起 理由
黄奕豪 + 1 赞一个!

查看全部评分

回复 使用道具 举报
很明确的告诉你,你的代码是没有错误的,你使用的浏览器可能是ie8吧  我的也是ie8  以前在做这个实例的时候也是这样的问题, 点击下列列表后 可能字体大小不会自动却换,这是你可以点击一下上面的 div标签框 就可以 切换了  这是ie8浏览器的原因。
回复 使用道具 举报
你直接在下拉框切换的时候,就把当前值传到方法里面去。

下面是我写的代码。你可以参考一下。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. </head>

  7. <body>
  8. <form id="form1" name="form1" method="post" action="">
  9. <label>
  10. <input type="text" name="textfield"/>




  11. <select name="select" onchange="change(this.value);">    //在这里直接把当前的value值传给方法。这样在js里面就不用取了。
  12. <option value="1">首字母大写</option>
  13. <option value="2">全部大写</option>
  14. <option value="3">全部小写</option>
  15. </select>
  16. </label>
  17. </form>
  18. </body>
  19. </html>

  20. <script language="javascript">
  21. function change(value)
  22. {
  23. var textObj = form1.textfield;   //获取文本对象
  24. var textValue = textObj.value;     //获取文本当前值。

  25. if(value==1){

  26. textObj.value="";   //先清空。
  27. var buf = textValue.substring(0,1).toUpperCase();
  28. buf += textValue.substring(1);
  29. textObj.value=buf;

  30. }else if(value==2){

  31. textObj.value="";
  32. var buf = textValue.toUpperCase();
  33. textObj.value=buf;

  34. }else if(value==3){
  35. textObj.value="";
  36. var buf = textValue.toLowerCase();
  37. textObj.value=buf;
  38. }
  39. }

  40. </script>

复制代码
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马