例子里的代码正确?
例子里的那段代码确定运行结果就是下面图片的结果吗?我运行的结果是:p元素Class的值为:one;同时点击按钮也没有反应。认真核对了一下自己的代码和例子里的代码没有发现不同。问一下原因,谢谢,
例子里的那段代码确定运行结果就是下面图片的结果吗?我运行的结果是:p元素Class的值为:one;同时点击按钮也没有反应。认真核对了一下自己的代码和例子里的代码没有发现不同。问一下原因,谢谢,
2015-07-13
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>className属性</title> <style> body{ font-size:16px;} </style> </head> <body> <p id="p1" class="gu" > JavaScript使网页显示动态效果并实现与用户交互功能。</p> <button id="btn">右边是上面的class,点击改变</button><i></i> <script type="text/javascript"> var a = document.getElementById('p1'); var i = document.getElementsByTagName('i'); i[0].innerHTML = a.className; document.getElementById('btn').onclick = function() { a.className = a.className=="hui"?"gu":"hui"; i[0].innerHTML = a.className; } </script> </body> </html>
图片你觉得没变化是由于事先打印出来的文本没变化,你可以看看节点处的class是有变化的。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>className属性</title> <style> body{ font-size:16px;} .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; } .two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:blue; } </style> </head> <body> <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="添加样式" onclick="add()"/> <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="更改外观" onclick="modify()"/> <script type="text/javascript"> function add(){ var p1 = document.getElementById("p1"); p1.className="one"; } function modify(){ var p2 = document.getElementById("p2"); p2.className="two"; } </script> </body> </html>
举报