控制类名（className 属性），JavaScript入门篇教程-慕课网

第4章编程挑战
编程：4-1 编程挑战

控制类名（className 属性）

className 属性设置或返回元素的class 属性。

语法：

object.className = classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

看看下面代码，获得 <p> 元素的 class 属性和改变className：

结果:

任务

我们通过className属性来设置元素的样式:

1.在右边编辑第33行补充代码，给id="p1"元素通过className添加"类名为one"的样式。当点击"添加样式"按钮，第一段文字添加样式。

2.在右边编辑第37行补充代码，给id="p2"元素通过className修改为"类名为two"的样式。当点击"更改外观"按钮，第二段文字更改样式。

?不会了怎么办: 1. 添加"类名为one: p1.className = "one";

2. 修改为"类名为two: p2.className = "two";

index.html

1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

问答
评论
笔记
代码

全部精华我要发布

无问题，删不掉

最新回答 / Devil难情

非常不错！

1 回答 314 浏览

2023-05-31

为什么加了这行代码后点击更改外观后 p标签里面的文本都没了页面只显示 p2元素的值为 two

最新回答 / 慕尼黑4405802

<body> <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="添加样式" onclick="add()"/> <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="更改外观" onclick=...

2 回答 776 浏览

2022-08-18

p1.className="one" 未改变样式怎么办

最赞回答 / 奶油小孙

p1.className='one';你代码位置写错了

6 回答 1306 浏览

2020-08-07

3-6：className到底哪里出错了呢？？？

已采纳回答 / 矜持大魔王

onclick="abc()" onclick="edf()",这样才可以哦

4 回答 2060 浏览

2020-08-27

哪里有错呀请问

最新回答 / 慕工程5227105

没有调用函数

2 回答 800 浏览

2020-03-28

为什么加的重置按钮无法重置，求大神看看原因

已采纳回答 / langkye

因为Css会一直影响整个DOM，除非你用行内样式覆盖掉原来的css样式；你remove掉style是没用的，因为那个元素没有style

3 回答 1542 浏览

2020-03-03

为什么我在注释掉function的函数声明后，函数依旧可以起作用？

已采纳回答 / 慕移动3487493

复制后到code上尝试了下，注释后没有显示，大概是没有刷新所以显示了

2 回答 910 浏览

2020-02-21

恢复样式代码

最赞回答 / 慕桂英2461150

if(p1.className!="one"){ p1.className = "one"; }else{ p1.className=null; }}代码问题是这两个if语句的问题，这两个if语句的意思是p1的样式和one里的样式相比较，如果相同那就开始执行one的样式给P1(所以这个代码根本没用，既然都一样了为社么还要继续在改成一样的)，否则就把P1的样式清除。两个if语句都是错误。改正：去掉if语句就好了。这里用if语句没作用，画蛇添足而且还是错误的。

2 回答 1007 浏览

2020-07-09

这是什么情况，编辑器的问题吗

最赞回答 / 慕桂英2461150

请问你的问题是运行的时候P2的样式就已经成了CSS里的one样式了吗？如果是这个问题那么我回答一下。问题出在<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>这个代码里面。这里的class="one"就是直接在写代码的时候给了它one样式，所以运行的时候就是one的样式，再点击"更改外观"就会再变成two的样式。解决方法：直接把class="one"去掉

4 回答 929 浏览

2021-12-01

实现看不出问题出现在哪里。麻烦帮看一下。

最新回答 / weixin_慕的地6373561

我感觉你one two位置给反了下面

4 回答 986 浏览

2020-09-03

改了样式如何再恢复样式呢?

最新回答 / 慕九州5249392

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

2 回答 1299 浏览

2019-11-29