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

為什么點擊更改樣式沒有變化啊

<!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");
	??????function.modifyclass(){
	??????????p1.className="類名為one";
	??????}
	???}
	???function?modify(){
	??????var?p2?=?document.getElementById("p2");
	??????function.modifyclass(){
	??????????p2.className="類名為two";
	??????}
	???}
	</script>
</body>
</html>

Flzz

2017-07-29

源自：JavaScript入門篇 3-6

關注問題我要回答

1532

操作

收起

2 回答

impeldown_0 回答被采納 +2 積分
2017-07-29

把類名為三個字刪除就行了，className是改成”one“和”two“，不是”類名為one“

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

收起回答

Flzz 提問者

改了也不行

2017-07-29 回復有任何疑惑可以回復我~

impeldown_0 回復 Flzz 提問者

還有一個問題，function modifyclass（）{}這段刪除，也就是直接改成p1.className="two";就行了，或者你在modify函數里加入調用modifyclass（）指令才能執行，因為你在一個函數里定義了另一個函數但是并沒有調用它，所以不會執行的。

2017-08-08 回復有任何疑惑可以回復我~

Flzz 提問者

非常感謝！

2017-08-08 回復有任何疑惑可以回復我~

impeldown_0
2017-08-08

<!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");
? ? ? ?function modifyclass(){
? ? ? ? ? ?p1.className="one";
? ? ? ?}
? ? ? ?modifyclass();
? ?}
? ?function modify(){
? ? ? ?var p2 = document.getElementById("p2");
? ? ? ?function modifyclass(){
? ? ? ? ? ?p2.className="two";
? ? ? ?}
? ? ? ?modifyclass();
? ?}
</script>
</body>
</html>