js的重点1:操作元素（样式不多的时候操作元素的style属性、样式多的时候操作元素的className属性、classList.add和classList.remove)

最新推荐文章于 2024-10-09 13:00:00 发布
最新推荐文章于 2024-10-09 13:00:00 发布
阅读量235 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42129553/article/details/108643520
版权
js 专栏收录该内容
49 篇文章 6 订阅 ¥19.90 ¥99.00
订阅专栏
本文介绍了JavaScript操作HTML元素样式的两种主要方法：当样式较少时使用element.style，样式较多时通过className和classList操作。详细讲解了如何添加、修改和删除类名，并给出了排他思想实现样式的示例。
摘要由CSDN通过智能技术生成

操作元素

1、如果要添加的样式比较少的话，那么就直接用element.style

2、如果要添加的样式比较多的话，那么就要给element添加class 获取元素的属性中，样式是style,class是用className获取的

3、修改类名

(1)element.className=’’ 会直接覆盖前面的
(2)element.classList.add(‘XX’) 会在class里追加一个类名
element.classList.remove(‘xx’) 会在class里删除一个类名

示例:
用排他的思想实现效果

    <ul>
        <li>苹果</li>
了解本专栏 订阅专栏 解锁全文
小黄呀呀呀
关注
专栏目录
订阅专栏
JS原生实现css动画切换避免使用.style来直接添加样式，请使用classList.add代替
weixin_51116314的博客
02-22 838
项目背景 首先我想实现这么一个侧边栏效果 直接一个hover就能实现 可是我想添加一个效果，就是点击右上角的收回按钮可以锁定住侧边栏，这样鼠标移开就不会自动收回了 贴上代码（也可以点目录跳至问题描述） 代码 HTML <div class="imageList-container movable"> <div id="pullback"><svg t="1613860886171" class="icon" viewBox="0 0 1024 1024" versio
element.classList属性及方法应用
sky_jser
10-24 9218
element.classList属性用于返回一个元素的className集合，并且该属性拥有add，remove，toggle，contains方法，详见：https://developer.mozilla.org/en-US/docs/DOM/element.classList。 一般我们再操作dom节点的className时经常会有以下4个需求： 判断该节点是否存在某个class
JS classList.add和className
wwy6191的博客
09-29 513
classList是直接修改一个节点的类名，classList.add()则是添加一个类名，对之前的内容不做修改。
element.classList 详解
最新发布
Sherry Tian的博客
10-09 481
element.classList属性是HTML5中引入的，它的使用方法有哪些，会给dom操作带来哪些遍历呢，一起来看看吧！
动态添加类和元素样式属性（style and className）
aoxi0033的博客
03-10 248
写了将近两天了，不断的测试，不断的改，终于还是写出来了。高手请勿见笑。确实花了不好时间，囧~~~ 现在来说一下这些撇脚代码（还可以大大的优化）的功能描述，第一个是修改元素的样式即元素的style方法，传入的style可以是对象，也可以是字符串。 有自己的格式。如果元素已经有定义过的样式，比如说已经定义过boder了，现在又传入一个border,那么新添加的样式会覆盖掉原有样式。别问我...
js操作元素className
aomenglong0411的博客
04-25 133
Base.prototype.addClass = function (className) { for (var i = 0; i < this.elements.length; i ++) { if (!this.elements[i].className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))){...
javascript操作元素的常见方法小结
10-16
3. 通过`.style`属性读写元素的内联样式，通过`.className`和`.classList`来动态操作元素的类名。 4. 使用“.”和“[]”操作符来访问和修改元素的属性。 5. 使用事件监听器添加交互功能。 掌握了上述知识点，我们...
JS批量操作CSS属性详细解析
12-01
这展示了如何利用JavaScript改变元素的`className`属性，实现CSS类的动态切换，从而改变元素的样式。 在实际开发中，还可以利用`getComputedStyle`获取元素的最终计算样式，以及`classList`接口来更方便地添加、...
JavaScript操作class和style样式代码详解
10-22
在深入了解JavaScript操作class和style样式之前，我们需要先了解class和style在HTML文档中表示什么以及如何使用JavaScript进行操作。 ### HTML中class和style的基本概念 在HTML中，class是HTML元素的一个属性，...
JavaScript DOM操作详解：元素查找、内容获取与属性管理
- 利用类选择器动态设置元素样式，如`a[o].style.backgroundColor = "red"`，注意此操作仅限于`<body>`内的元素。 5. 相关元素操作： - `nextSibling`：找到当前元素的下一个同级兄弟元素，包括空白节点。 - `...
JavaScript修改css样式style动态改变元素样式
10-26
1. 改变直接样式：这种方式直接修改元素对象的style属性，例如使用document.getElementById('obj').style.backgroundColor="#003366"来改变某个元素的背景颜色。值得注意的是，直接操作style属性时，我们需要编写...
如何将类添加到给定的元素？
p15097962069的博客
12-12 335
我有一个已经有一个类的元素： <div class="someclass"> <img ... id="image1" name="image1" /> <
js的classList
qq_52845451的博客
07-07 5501
js的classList简单汇总
JS 基础 API(新选择器、Element.classList、自定义属性 DATA-)
weixin_42235173的博客
06-04 491
5. JS 基础 API 5.1. 新选择器 JavaScript在HTML5中多了一套原生选择器API 其功能类似jQuery选择器 写法上类似原本的document.getElementById(‘xxx’) var element1 = document.getElementById('section1'); √ 已经get var elements2 = document.getEle...
style和className
Do one thing at a time, and do well.
03-02 4298
元素.style.属性 = xxx,是修改行间样式，之后再修改className就会没有效果. 先变红后变绿色就没有问题，但是先变绿色再变红色就会出现问题，style的属性比className的优先级高。 Untitled Document #div1 {width:200px; height:200px; border:1px solid black;} .box {back
HTML5 classList 操作类名
白瑕 的博客
09-28 1613
使用HTML5 classList在JS中操作类名 文章目录使用HTML5 classList在JS中操作类名前言一、classList.add()二、classList.remove()三、classList.replace()四、classList.toggle()五、classList.contains()总结 前言 今天遇到一个需求,需要在每次点击的时候触发CSS动画,但是按照以往的经验(走的弯路),一个CSS动画在触发一次之后,如果不做出改动,下次再触发就播放不了了. 比如给一个按钮添加一个点
classList 属性 用法
An哒哒
05-30 1145
classList 属性 classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。 该属性用于在元素中添加，移除及切换 CSS 类。有以下方法 添加类： element.classList.add（’类名’）； 移除类： element.classList.remove（’类名’）; 切换类： element.classList.toggle（’类名’）; 案例 用classList属性实现开关灯 <style> .bg {
操作元素之修改样式属性
leechoy
06-12 686
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小黄呀呀呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值