问答详情
源自：3-6 控制类名（className 属性）

例子里的代码正确？



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

提问者：lovelife23 2015-07-13 07:32

个回答

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

    0
  • 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>


    0