黑马程序员技术交流社区

标题: 关于javascript中练习做一个跟css手册中一样的实例的一个小问题 [打印本页]
作者: 马东华    时间: 2012-6-8 10:39
标题: 关于javascript中练习做一个跟css手册中一样的实例的一个小问题
  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>

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

  51. </body>
  52. </html>
复制代码
我做出的页面，只有在第一次选择的时候会出来效果，一旦第二次选择，上面的文字格式就不会变了，这是问什么啊，求解答
作者: 杨文园    时间: 2012-6-8 11:12
粘贴你的代码运行，出现了乱码显示 ？？
作者: 符云爵    时间: 2012-6-8 12:16
byId()这是神马函数？？？
document.getElementById()这样写才对吧
作者: 赵兵锋    时间: 2012-6-8 12:46
不知道你的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>
复制代码
作者: 唐志兵    时间: 2012-6-8 13:26
很明确的告诉你，你的代码是没有错误的，你使用的浏览器可能是ie8吧  我的也是ie8  以前在做这个实例的时候也是这样的问题， 点击下列列表后 可能字体大小不会自动却换，这是你可以点击一下上面的 div标签框 就可以 切换了  这是ie8浏览器的原因。
作者: 杨天皓    时间: 2012-6-8 13:46
你直接在下拉框切换的时候，就把当前值传到方法里面去。

下面是我写的代码。你可以参考一下。
  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>

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




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

  26. <script language="javascript">
  27. function change(value)
  28. {
  29. var textObj = form1.textfield;   //获取文本对象
  30. var textValue = textObj.value;     //获取文本当前值。

  32. if(value==1){

  34. textObj.value="";   //先清空。
  35. var buf = textValue.substring(0,1).toUpperCase();
  36. buf += textValue.substring(1);
  37. textObj.value=buf;

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

  41. textObj.value="";
  42. var buf = textValue.toUpperCase();
  43. textObj.value=buf;

  45. }else if(value==3){
  46. textObj.value="";
  47. var buf = textValue.toLowerCase();
  48. textObj.value=buf;
  49. }
  50. }

  52. </script>

复制代码




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2