                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript入門篇

例子里的代碼正確？

例子里的那段代碼確定運行結果就是下面圖片的結果嗎？我運行的結果是：p元素Class的值為：one；同時點擊按鈕也沒有反應。認真核對了一下自己的代碼和例子里的代碼沒有發現不同。問一下原因，謝謝，

lovelife23

2015-07-13

源自：JavaScript入門篇 3-6

關注問題我要回答

1079

操作

收起

2 回答

arlenhui
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是有變化的。

0 回復有任何疑惑可以回復我~

收起回答

lovelife23 提問者

謝謝。

2015-07-13 回復有任何疑惑可以回復我~

arlenhui
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;}
????.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 回復有任何疑惑可以回復我~

收起回答

lovelife23 提問者

親：不是這個，這不是任務里的代碼嘛。這個沒有問題，自己也能解決。是這一節圖片里的那個代碼。謝謝

2015-07-13 回復有任何疑惑可以回復我~