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

關于className屬性的問題

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>控制類名（className屬性）</title>
</head>
<style?style?=?"text/css">
body{
?????font-size:20px;
?????color:red;
?????/*background-color:#666;*/
?????}
.one{
?????width:200px;
?????background-color:#666;
?????}
.two{
?????font-size:12px;
?????color:#F00;
?????}?????
</style>

<body>
<p?id?=?"con"?class?=?"one">JavaScript使網頁顯示動態效果并實現與用戶交互功能。</p>
<form>
<input?type?="button"?onclick?="modifyclass()"?value?="點擊更改屬性"?>
<input?type?="button"?onclick?="modify1()"?value?="點擊顯示更改后的屬性"?>
</form>
<script?type?="text/javascript">
var?myclass?=?document.getElementById("con");
document.write("P元素的Class值為："+myclass.className+"<br>");
function?modifyclass(){
	myclass.className?=?"two";
}
function?modify1(){
	document.write("改變后P元素的Class值是："+myclassName);
}

</script>
</body>
</html>

我的問題是：想顯示更改后P元素的className屬性的值，為什么點擊“顯示更改后的屬性”按鈕時沒有反應呢？

shaoxiao64017599

2017-02-28

源自：JavaScript入門篇 3-6

關注問題我要回答

1366

操作

收起

4 回答

學習js 回答被采納 +3 積分
2017-02-28

<script?type?="text/javascript">
var?myclass?=?document.getElementById("con");
function?modifyclass(){
????myclass.className?=?"two";
????document.write("P元素的Class值為："+myclass.className+"<br>");
}

function?modify1(){
????myclass.className?=?"two";
????document.write("改變后P元素的Class值是："+myclass.className);
}
</script>

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

收起回答

shaoxiao64017599 提問者

明白了兩個函數

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

半夏半暖半晴天
2017-02-28

function?modify1(){

????myclass.className?=?"two";

????document.write("改變后P元素的Class值是："+myclass.className);

}

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

收起回答

shaoxiao64017599 提問者

恩恩明白了謝謝啦

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

Samuel_Yang
2017-02-28

<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8">
? ?<title>控制類名（className屬性）</title>
</head>
<style style = "text/css">
? ?body{
? ? ? ?font-size:20px;
? ? ? ?color:red;
? ? ? ?/*background-color:#666;*/
? ?}
? ?.one{
? ? ? ?width:200px;
? ? ? ?background-color:#666;
? ?}
? ?.two{
? ? ? ?font-size:12px;
? ? ? ?color:#F00;
? ?}
</style>

<body>
<p id = "con" class = "one">JavaScript使網頁顯示動態效果并實現與用戶交互功能。</p>
<form>
? ?<input type ="button" onclick ="modifyclass()" value ="點擊更改屬性" >
? ?<input type ="button" onclick ="modify1()" value ="點擊顯示更改后的屬性" >
</form>
<script type ="text/javascript">
? ?var myclass = document.getElementById("con");
? ?function modifyclass(){
? ? ? ?myclass.className = "two";
? ?}
? ?function modify1(){
? ? ? ?myclass.className="one";
? ?}

</script>
</body>
</html>