例子里的代码正确？-慕课网

首页课程实战体系课手记专栏慕课教程

例子里的代码正确？

来源：3-6 控制类名（className 属性）

lovelife23

2015-07-13 07:32

例子里的那段代码确定运行结果就是下面图片的结果吗？我运行的结果是：p元素Class的值为：one；同时点击按钮也没有反应。认真核对了一下自己的代码和例子里的代码没有发现不同。问一下原因，谢谢，

写回答关注

2回答

arlenhui: 2015-07-13 15:02:37

<!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是有变化的。

1 0

loveli...

谢谢。

2015-07-13 15:33:56

共 1 条回复 >

arlenhui: 2015-07-13 13:38:57

<!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>

1 0

loveli...

亲：不是这个，这不是任务里的代码嘛。这个没有问题，自己也能解决。是这一节图片里的那个代码。谢谢

2015-07-13 14:51:16

共 1 条回复 >

JavaScript入门篇

JavaScript做为一名Web工程师的必备技术，本教程让您快速入门

741615 学习 · 9869 问题

查看课程

相似问题

例子里面的代码有bug

回答 2