实现toggleClass功能

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量97 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/cisum/p/7987212.html
版权 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5 <meta charset="UTF-8">
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 <title>Document</title>
 9 <style>
10 div.testClass {
11 background-color: gray;
12 }
13 </style>
14 </head>
15 
16 <body>
17 <div id="test" style="width:250px;height:100px;">
18 sssssssssssss
19 </div>
20 <input type="button" value="toggleClassTest" onclick="toggleClassTest();" />
21 </body>
22 
23 
24 <script type="text/javascript">
25 function hasClass(obj, cls) {
26 return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
27 }
28 
29 function addClass(obj, cls) {
30 if (!this.hasClass(obj, cls)) obj.className += " " + cls;
31 }
32 
33 function removeClass(obj, cls) {
34 if (hasClass(obj, cls)) {
35 var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
36 obj.className = obj.className.replace(reg, ' ');
37 }
38 }
39 
40 function toggleClass(obj, cls) {
41 if (hasClass(obj, cls)) {
42 removeClass(obj, cls);
43 } else {
44 addClass(obj, cls);
45 }
46 }
47 
48 function toggleClassTest() {
49 var obj = document.getElementById('test');
50 toggleClass(obj, "testClass");
51 }
52 </script>
53 
54 </html>

 

<!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 >Document </ title >
< style >
div.testClass {
background-color: gray;
}
< / style >
</ head >

< body >
< div id= "test" style= "width:250px;height:100px;" >
sssssssssssss
</ div >
< input type= "button" value= "toggleClassTest" onclick= "toggleClassTest();" />
</ body >


< script type= "text/javascript" >
function hasClass( obj, cls) {
return obj. className. match( new RegExp( '( \\ s|^)' + cls + '( \\ s|$)'));
}

function addClass( obj, cls) {
if (! this. hasClass( obj, cls)) obj. className += " " + cls;
}

function removeClass( obj, cls) {
if ( hasClass( obj, cls)) {
var reg = new RegExp( '( \\ s|^)' + cls + '( \\ s|$)');
obj. className = obj. className. replace( reg, ' ');
}
}

function toggleClass( obj, cls) {
if ( hasClass( obj, cls)) {
removeClass( obj, cls);
} else {
addClass( obj, cls);
}
}

function toggleClassTest() {
var obj = document. getElementById( 'test');
toggleClass( obj, "testClass");
}
< / script >

</ html >

转载于:https://www.cnblogs.com/cisum/p/7987212.html

weixin_30565327
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
toggleClass
依韵
08-16 715
toggleClass 用来给匹配元素切换类
jQuery属性 toggleClass()方法添加和移除
11-02
jQuery的toggleClass()方法是JavaScript库中的一个核心功能，它在网页动态效果和用户交互中扮演着重要角色。这个方法允许我们方便地切换HTML元素的CSS类，即在元素上添加或移除一个或多个类，根据该类是否已经存在。...
JS toggleClass
weixin_30902675的博客
04-23 240
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me...
原生js实现toggle classname的功能
qq_40816360的博客
11-28 818
function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(obj, cls) { if (!this.hasClass(obj, cls)) obj.className += &quot; &quot;...
HTML5: element.classList API实例：简易样式控切换按钮
emowuyi
10-31 131
简易样式控切换方法使用了element.classList API，当用户文本框下面按钮时，文本框文本会出变为相应的样式。其它不说了，代码非常简单，自己试一试吧！ 演示地址：进入 下载地址：html5实例 核心代码 一、为样式控制定义不同样式&lt;style&gt; … .big { font-size: 30px; line-height: 30px; } .bold { f...
用简洁的jQuery方法toggleClass实现隔行换色
10-25
本文将详细介绍如何利用jQuery中的toggleClass方法来实现这一功能，同时也会探讨toggleClass方法的工作原理以及其在实际应用中的优势。 首先，让我们了解toggleClass的基本概念。jQuery的toggleClass方法允许我们在...
jQuery使用toggleClass方法动态添加删除Class样式的方法
12-11
在JavaScript的世界里，jQuery库为开发者提供了很多便捷的API，其中`toggleClass`是一个非常实用的功能。这个方法允许我们在元素上动态地添加或删除一个或多个CSS类，使得我们的页面交互更加灵活和生动。本文将深入...
jQuery实现TaoBaoUED左侧导航特效代码
03-20
这通常结合`.addClass()`，`.removeClass()`和`.toggleClass()`方法来完成。 4. **下拉菜单**：对于有子级的导航项，下拉菜单的展开和收起可以通过`.slideToggle()`方法实现。这个方法会以滑动效果改变元素的高度，...
jQuery实现分步注册向导特效代码
03-20
为了实现这一功能，我们可以创建一系列HTML元素，如divs或steps，用于表示每个步骤，并使用CSS进行样式设计，以实现视觉上的分隔和导航。 接下来，我们利用jQuery来处理用户交互和步骤切换。以下是一些关键的jQuery...
jQuery之toggleClass() 方法
weixin_45866961的博客
06-24 2500
toggleClass()对设置和移除被选元素的一个或多个类进行切换，有则删除，无则加 toggleClass() 方法有两个参数，class和switch
小程序 toggle ，列表的展现和隐藏
weixin_34336292的博客
05-19 800
截止到目前（2017-5-19），小程序还未提供良好的toggle功能。在开发的时候，自己做了一个简单的实现。其中还遇到了一些其他的小麻烦，这里与大家探讨： 情景：从远端获取数据，在小程序界面展现标题列表，点击标题查看详情。 实现1）：获取数据后，只展现标题，把详情隐藏起来。显然这里需要增加一个开关，标题增加一个点击事件，控制详情展...
jQuery中toggle()方法、toggleClass()方法
热门推荐
半夏半暖半倾城的博客
06-19 1万+
toggle()方法定义和用法toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。该方法也可用于切换被选元素的 hide() 与 show()向 Toggle 事件绑定两个或更多函数当指定元素被点击时，在两个或多个函数之间轮流切换。如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，...
toggleClass的用法简介
蜜子的蜜的博客
09-07 2339
toggleClass的用法就是，如果你选择的页面元素中 存在class属性，那就去掉calss属性；如果不存在class属性，就添加class属性。 下面是ztree下拉选择按钮的切换跟界面的显示跟隐藏 <div id="ztreeMenu" class="ztreeVisible" style="background-color: rgba(255, 255, 255, 0.8);position: absolute;top: 30px;left:50%"> .
toggle()和toggleClass()的区别
weixin_44469806的博客
12-17 616
当toggle（），不带参数时,与show()和hide()的作用一样，切换元素的可见状态 如果元素是可见的,则切换为隐藏状态; 如果元素是隐藏的则切换为可见状态 （有一个动画效果） oggleClass( )与toggle( )差不多,如果里面含有class样式则移除（但不会被隐藏，只是样式移除）,没有的话则添加。 ...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 244
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 100
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 878
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Webkit简介以及工作流程
读心悦
07-10 308
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
javaweb中removeClass()功能，toggleClass功能
06-12
在JavaWeb中，removeClass()和toggleClass()是JavaScript中常用的两个DOM操作函数，用于添加、删除和切换HTML元素的...这两个函数可以帮助我们在JavaScript中方便地操作HTML元素的类名，实现更加灵活的页面交互效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值