JavaScript对类的操作（添加移除切换样式）

最新推荐文章于 2022-08-11 19:11:19 发布
最新推荐文章于 2022-08-11 19:11:19 发布
阅读量949 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yueqin0512/article/details/108959400
版权
本文介绍了如何使用JavaScript实现元素样式的添加、移除和切换功能，结合HTML和CSS代码示例，展示了点击按钮动态改变元素样式的应用场景。
摘要由CSDN通过智能技术生成

效果（点击按钮可以改变box的样式，在原有样式上添加移除切换样式）：
在这里插入图片描述
html代码：

<button id="btn1">点击改变box1的样式</button>
<br>
<br>
<div id="box1" class="b1 b2"></div>

css代码：

.b1{
   
    width: 100px
最低0.47元/天 解锁文章
吃不胖的猫o(=^ェ^=)m
关注
专栏目录
JQuery实现样式设置、追加、移除与切换的方法
10-24
JQuery是前端开发中非常流行的JavaScript库，它提供了一系列简洁的方法来简化DOM操作，其中包括对元素样式的设置、追加、移除和切换等操作。这些操作是前端开发中常见的需求，用于控制网页元素的显示和风格。 首先...
js遍历添加栏目类添加css 再点击其它删除css【推荐】
12-01
具体代码如下： //js遍历添加栏目类添加css 再点击其它删除css $(".radio-group .ckselect").each(function(index) { $(this).click(function() { var tagid=$(this).attr('tagid'); $("#tagid").val(tagid) $(".ckselect").removeClass("selected"); $(".ckselect").eq(index).addClass("selected") }) }); //js点击显示关闭层，空白区
JS练手dome Ⅴ.(鼠标移入移出改变样式)
jziwjxjd的博客
05-06 333
练手地址 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{ width:160px;height:160px; background:bla...
用 Javascript 实现检测、添加、移除样式（className）
lzf0514的专栏
08-12 174
前台脚本中，我们经常要操作页面元素的样式，比如标签页切换时，将当前标签加上一个样式，当切换到其他标签时，再将样式还原，本文介绍的是直接添加和移除 className 的方法。 Javascript:     &lt;script type="text/javascript"&gt;   // 说明：添加、移除、检测 className   func...
js点击 增加样式再次移除
MELANCHOLY ❤ ◁ ❚❚ ▷
01-11 884
点击增加再次移除 $("#menu").on("click", function () { $("#body").toggleClass("menu_color"); }); $("#menu").click(function () { $("#body").toggleClass("menu_color"); });
JavaScript对HTML元素的增加与删除实训
₯㎕๓安笙的博客
04-20 230
在JavaScript中可以对HTML中的元素进行增加或者删除 添加： 首先我们必须先创建该元素 使用document.createElement()，传入元素名即可创建，可使用var类型接收然后对该标签进行设置。 然后将其追加到已有元素 使用已有元素的对象调用appendChild()方法可把元素追加到已有元素 删除： 删除某个 HTML 元素，您需要知晓该元素的父元素： 然后使用父元素调...
Javascript 检测、添加、移除样式(className)函数代码
10-29
在JavaScript中，对DOM元素的样式进行操作是前端开发中常见的任务。这通常涉及到检查一个元素是否具有特定的CSS类（className），以及如何添加或移除这些类。在这篇文章中，我们将深入探讨如何使用JavaScript来实现...
jQuery 添加/移除CSS类实现代码
12-02
在网页开发中，jQuery库极大地简化了DOM操作，包括对CSS类的添加、移除和切换。本篇文章将详细介绍jQuery中的三个主要方法：addClass()、removeClass()和toggleClass()，以及辅助方法hasClass()，用于处理元素的CSS...
【JavaScript】点击的添加样式，其他的删除样式（addClass和removeClass）
咔咔博客
12-28 4373
author：咔咔 wechat：fangkangfk   layui.use(['jquery',], function(args){ var $= layui.jquery; $('.type').click(function () { $(this).addClass('checked').siblings().rem...
纯js实现点击切换内容
hhazjyh5210的博客
08-11 3934
js实现点击切换，排他思想
点击添加类名—js实现鼠标点击一个div删除另一个div的class中的其中一个类名，再点击一下又添加上
weixin_44711440的博客
04-14 2428
多个div，根据点击哪个，哪个添加class，兄弟元素的相同class删除
Js实现检测、添加、移除样式（className）
生命的异狂
07-26 691
[code="java"] // 说明：添加、移除、检测 className function hasClass(element, className) { var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); return element.className.match(reg); } func...
html循环自动点击事件,js循环遍历ul中li的点击事件，给给选中li添加css
weixin_35879989的博客
05-31 1708
功能：对于一个ul中固定的li个数，当点击其中一个li时，改变选中li的颜色；同时改变对应的另一个ul中li的颜色页面初始化的界面：HTML：其他推荐:10:2110:2210:2510:2810:30剩余红包数:2001501005020在js中定义“其他事件”里面的li点击事件，改变选中li的样式(代码用jquery写的)：// 设置选中的推荐的时间和红包数的背景色和字体颜色// 推荐的时间v...
js 添加删除class样式
weixin_43235307的博客
12-17 2485
1、html前端 <button type="button" class="btn btn-light-primary m-1"> <i class='bx bx-edit'></i> </button> <button type="button" class="btn btn-light-secondary m-1" id="btn"> // 图标样式 <i class='bx bx-right-top-arrow-circ
JS/jQuery添加和移除CSS样式
热门推荐
我的博客
12-17 8万+
　　有时候需要添加CSS样式和移除CSS样式，如添加display属性，设为隐藏。有时候需要移除display属性。 一、jQuery移除CSS样式的两种方法 注意：当其中一种不支持时，就尝试另一种： $(&amp;quot;#show&amp;quot;).removeAttr(&amp;quot;style&amp;quot;); $(&amp;quot;#show&amp;quot;).attr(&amp;quot;
原生js移除或添加样式
weixin_33778778的博客
04-03 1万+
样式效果如下，点击商品详情添加样式active 代码 <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Autho...
原生JS给元素添加类 移除类
08-06 7975
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;title&gt;原生J
JavaScript列表切换示例与IE兼容性处理
使用`classList.add()`和`classList.remove()`方法来添加或移除特定的CSS类，例如`.selectedjs_btn`。 3. **兼容性处理**: 文档提到IE浏览器的兼容性问题，由于未详细提及，可能指的是IE对某些JavaScript特性（如`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值