JS基础第10课：控制类名（className 属性）

最新推荐文章于 2023-05-22 14:24:20 发布
最新推荐文章于 2023-05-22 14:24:20 发布
阅读量869 收藏 1
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaojian123321/article/details/52885009
版权

控制类名（className 属性）

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

语法：

object.className = classname

作用:

1.获取元素的class 属性

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


<!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="添加样式" οnclick="add()"/>
    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" οnclick="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
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序框架wepy之动态控制类名
10-18
主要为大家详细介绍了微信小程序框架wepy之动态控制类名，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
第十一章 属性设置或返回元素的class 属性
闽南土著
04-27 430
语法： object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 className属性     body{ font-size:16px;}     .one{   border:1px solid #eee;   width:230px;   heigh
SpringMVC 控制器类名处理映射
zero_130的博客
08-02 1345
学习参考自易百教程 ControllerClassNameHandlerMapping类是基于特定的控制器类名的处理程序映射类，通过它的配置，便可以将url中与控制器类名相同的所有增长匹配请求交给该控制器进行处理。例如，当定义一个HelloController控制器时（通过继承AbstractController，实现handleRequestInternal方法，而不是添加注解），该类方法中将...
【Java编程规范】[框架级编程规范]004
项目管理、软件工厂、vue研发、Java研发、中国文化等。
05-22 325
Rest接口通用规范REST接口是围绕资源来定义的， 所以在定义REST接口前首先需要把资源定义清楚。资源本身的定义比较抽象，在大多数场景下我们可以简单把资源理解为能明确表达一个业务对象的数据聚合。比如我们可以把【患者】定义为一个资源，它可能由患者主信息、患者联系人和患者联系地址等数据聚合构成。当采用关系数据库持久化资源时，【患者】资源可能会被保存到患者主信息表、患者联系人表和患者联系地址表中。本文使用的特殊符号符号说明{baseUrl}
js的className属性使用方法
HuangsTing的博客
10-30 8919
我们都知道通过className属性设置某个元素的class属性时将替换该元素原有的class设置。 如果需要的的“追加”效果而不是“替换”，可以利用字符串拼接操作，把新的class设置追加到className属性上去。 elem.className += &quot; intro&quot;; //注意：intro的第一个字符是空格 为了方便使用，可以封装一个addName函数。这个函数带两个参数：第一个是需要...
JavaScript控制类名（className属性）
12-13 340
语法：object.className =classname (注意大小写) 作用：获取元素的class属性，为网页内的某个元素指定一个CSS样式来更改该元素的外观 示例： <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; cha...
Js控制类名
阿天的博客
04-28 119
我用#CSDN#这个app发现了有技术含量的博客，小伙伴们求同去《用JS添加和删除class类名》, 一起来围观吧 https://blog.csdn.net/firstcode666/article/details/121589522?utm_source=app&app_version=5.3.1
控制类名（className 属性）
chuyusha5235的博客
12-18 116
语法： object.className=classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 看看下面代码，获得 <p> 元素的 class 属性和改变className： 结果: ...
控制类名（className属性）
dgf5765的博客
01-20 110
className 属性设置或返回元素的class 属性。 语法： object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 例如： 运行结果为： 点击“点击更改”后： 再例如： 运行结果为： 点击“添加样式”后： 点击“更改外观”后： ...
JavaScript通过控制类名更改样式
热门推荐
沈行的博客
11-14 1万+
控制类名（className 属性） className 属性设置或返回元素的class 属性。 语法： object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 className属性 body{ font-size:16px;}
get-css-selector:将类名转换为CSS选择器
05-19
获取CSS选择器将类名转换为CSS选择器 var getCssSelector = require ( 'classname-to-css-selector' ) ;var className1 = "container outer" ;var className2 = "block inner decorated" ;var el = document . ...
获取窗口与窗口中指定控件的各层级类名属性安装包.rar_句柄 控制_层级_属性_控件_类名
09-20
当我们要编写对外部程序进行控制，实现操作自动化的软件时，就需要获得外部程序窗口与窗口中指定控件的各层级类名属性，本软件可以实现此目的。将鼠标放置在外部程序窗口中指定控件上，时间超过3秒钟，本软件就会...
bem-classname:生成类似 bem 的类名的简单函数
06-02
bem 类名 生成类似 bem 的类名的简单函数 它需要 1 到 3 个参数——块、元素和修饰符，并生成类block__element ，如block__element 、 block__element block__element--mod等。 安装 npm install bem-classname ...
classname-manipulator:用于构建className的实用程序
05-23
类名操纵器 一个简单的javascript实用程序，用于构建classNames。 它类似于实用程序，但是它允许您使用bem命名符号和 。 用法 该实用程序旨在与React组件一起使用，并可以帮助您以更简单的方式为组件构建className。...
JavaScript—className 属性
JAVA那些事
07-28 1661
定义和用法 　　className 属性设置或返回元素的 class 属性。 语法 object.className=classname 实例 　　本例展示了两种获得 元素的 class 属性的方法：<html> <body id="myid" class="mystyle"><script type="text/javascript"> x=document.getElementsByT
控制类名（className 属性）设置或返回class属性
weixin_30619101的博客
06-11 294
控制类名（className 属性） className 属性设置或返回元素的class 属性。 语法： object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 看看下面代码，获得 <p> 元素的 class 属性和改变c...
设置class属性的值
09-06 2190
//添加如下代码，设置class属性的值，如下是我设置为空不显示  //获得span标签所有的class属性名称  var obj = document.getElementsByTagName("span");  //设置定义一个class属性名称   var class_name = "uploadify-button-text zj01";  //遍历符合定义的class属性名称，
javascript 类属性、类方法、类实例、实例属性、实例方法、prototype、__proto__
Y.Cheng的博客
12-15 603
&amp;amp;lt;script&amp;amp;gt; function Circle(radius) { this.r = radius; this.des = &amp;quot;圆形&amp;quot;; this.showInfo = function () { alert(&amp;quot;这是一个&amp;quot; + this.des); } } function Circle_area(r) {
js 事件的委派
m0_52946104的博客
09-20 587
js委派事件
第十八课：js样式操作需要注意的问题
最新发布
06-06
3. 使用className或classList可以方便地添加、删除、切换元素的类名，从而改变元素的样式。 4. 使用CSS伪类和伪元素可以方便地控制元素的样式，比如:hover可以在鼠标悬停时改变元素的样式。 5. 使用CSS样式表可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值