<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{width: 200px;height: 200px;background: yellowgreen} .page{color: red} .btn{font-size: 20px;} </style> </head> <body> <div class="box">这是测试</div> <script> var box=document.getElementsByClassName("box")[0]; box.className=box.className+" "+"page";//增加类名 box.classList.add("btn");//增加类名 box.classList.remove("btn");//移除类名 box.classList.item(1);//根据索引找类名 console.log(box.className); console.log(box.classList.item(1)) </script> </body> </html>
-
原生js增加,移除类名
2019-10-07 04:49:21//移除类名 box.classList.item( 1 );//根据索引找类名 console.log(box.className); console.log(box.classList.item( 1 )) script > body > html > 转载于:...转载于:https://www.cnblogs.com/xiaobaibubai/p/7473750.html
-
原生js添加移除类名(class)实现css3动画
2018-11-22 11:26:02源代码&amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&...css3动画及原生添加移除类- 源代码
<html lang="en"> <head> <meta charset="UTF-8"> <title>css3动画及原生添加移除类名(class)</title> <style> .two { width: 100px; height: 100px; background-color: pink; } /*transition实现动画*/ /*.two.now {*/ /*transform: translate(500px, 100px);*/ /*opacity: 0.5;*/ /*background-color: green;*/ /*transition: all 1s linear;*/ /*}*/ /*animation 实现动画*/ .two.now { animation: myAnimation 1s linear forwards;/*infinite alternate forwards*/ } @keyframes myAnimation { from { transform: translate(0, 0); } to { transform: translate(500px, 100px); } } </style> </head> <body> <input type="button" value="开始动画" class="one"> <input type="button" value="重置动画" class="three"> <div class="two"></div> <script> var btn = document.getElementsByClassName('one')[0]; var div = document.getElementsByClassName('two')[0]; var btn2 = document.getElementsByClassName('three')[0]; btn.onclick = function () { //不同添加类名的方式 // div.className = 'two now'; // div.setAttribute('class', 'two now'); // 虽然element.classList本身是只读的,但是你可以使用 add() 和 remove() 方法修改它。//h5的api,基于一个对象classList div.classList.add('now'); // div.setAttribute('className', 'two now'); // 兼容ie7及ie7以下版本 }; btn2.onclick = function () { div.classList.remove('now'); }; //jquery操作类的方法 addClass() removeClass() toggleClass hasClass() //h5 dom.classList.add() dom.classList.remove() dom.classList.toggle() //dom.classList.contains() </script> </body> </html>
- 源代码
-
模拟jQuery--添加类名和移除类名的封装
2016-03-17 23:45:00之前自己用原生的js添加类名和移除类名,用起来感觉还算顺手。在使用jQuery框架添加类名和移除类名时候更是觉得“傻瓜式”使用了。前两天在封装别的模块,今天想起自己也来搞一下添加类名和移除类名,,,不动手不...之前自己用原生的js添加类名和移除类名,用起来感觉还算顺手。在使用jQuery框架添加类名和移除类名时候更是觉得“傻瓜式”使用了。前两天在封装别的模块,今天想起自己也来搞一下添加类名和移除类名,,,不动手不知道,敲起来遇到不少bug。主要还是起初考虑的不够周到,不过调试工具真是个‘宝’;
这里直接附上我的代码了:
//添加类(可以一次添加多个类名) function addClass() { var arg = Array.prototype.slice.call(arguments); var dom = arg[0]; //取得dom var className = arg.slice(1); //取得要添加的类名(数组形式) var doms =document.querySelectorAll(dom); //获取所有符合的dom成员 for (var i = 0; i < doms.length;i++) { //为了避免当第一次设置类名且以前没有类名,会出现第一个有空格的现象 if (doms[i].className) { //如果之前有类名了 addOne(doms[i]); } else { //首次添加类名 firstaddOne(doms[i]); } } function addOne(dom) { for (var j = 0; j < className.length; j++) { var itemName = dom.className; var itemNames = [].push.call([],itemName); console.log(typeof itemNames); dom.className = dom.className + ' ' + className[j]; } } function firstaddOne(dom) { for (var j = 0; j < className.length; j++) { dom.className = dom.className + className[j]; } } } //移除类 function removeClass() { var arg = Array.prototype.slice.call(arguments); var dom = arg[0]; //取得dom var className = arg.slice(1); //取得要删除的类名(数组形式) var doms = document.querySelectorAll(dom); //获取所有符合的dom成员 //遍历dom for(var i=0;i<doms.length;i++){ var getAttr = doms[i].getAttribute('class'); var arr1 = getAttr.split(' '); //双重循环判断删除的类名是否与已有的类名一样 for(var j=0;j<arr1.length;j++){ for(var k=0;k<className.length;k++){ if(arr1[j]===className[k]){ arr1.splice(j,1); console.log(arr1.length); j--; break; } } } //一样--〉连同类名属性删除 if(arr1.length==0){ doms[i].removeAttribute('class'); }else{ //否则删除要删除的类名 removeOne(doms[i]); } } function removeOne(dom){ for (var j = 0; j < className.length; j++) { var getAttr = doms[i].getAttribute('class'); var arr1 = getAttr.split(' '); if(className[0]===arr1[0]){ dom.className = dom.className.replace(className[j], ''); }else{ dom.className = dom.className.replace(' ' + className[j], ''); } } } }
快乐的学习,才能快速的成长^_^
转载于:https://www.cnblogs.com/Snow-G/p/5290057.html
-
js实现类名的添加与移除
2019-10-18 08:56:44方法1:使用className属性; 方法2:使用classList API; //用于匹配类名存在与否 function reg(name){ return new RegExp('(^|\\s)...方法1:使用className属性;
方法2:使用classList API;
//用于匹配类名存在与否 function reg(name){ return new RegExp('(^|\\s)' name '(\\s |$)'); } //hasClass addClass removeClass toogleClass var hasClass,addClass,removeClass; if('classList' in document.documentElement){ hasClass = function(obj, cname) { // obj为要操作的元素对象,cname是类名 return obj.classList.contains(cname); }; addClass = function(obj, cname) { obj.classList.add(cname); }; removeClass = function(obj,cname) { obj.classList.remove(cname); }; toggleClass = function(obj, cname) { obj.classList.toggle(cname); }; }else{ hasClass = function(obj, cname) { return reg(cname).test(obj.className); }; addClass = function(obj, cname) { if(!hasClass(obj,cname)){ obj.className=obj.className ' ' cname; } }; removeClass = function(obj, cname) { obj.className=obj.className.replace(reg(cname),' '); }; toggleClass = function(obj, cname) { var toggle=hasClass(obj,cname)?removeClass:addClass; toggle(obj,cname); }; } //true document.body.classList.toString() === document.body.className;
注意:这种方法每次只能传一个类名且不能级联操作,而jquery下面的类似操作是可以操作多个类名的。
所以扩展一下:
//addClass DOMTokenList.prototype.addClass = function(str) { tts.split(' ').forEach(function(c){ this.add(c); }.bind(this)); return this; } //removeClass DOMTokenList.prototype.removeClass = function(str) { tts.split(' ').forEach(function(t){ this.remove(t); }.bind(this)); return this; } //removeClass DOMTokenList.prototype.toggleClass = function(str) { tts.split(' ').forEach(function(t){ this.toggle(t); }.bind(this)); return this; }
更多专业前端知识,请上【猿2048】www.mk2048.com -
原生js对类名的操作
2020-05-22 21:07:17原生js对类名的操作 ...移除类名:Dom.classList.remove(classname) 切换类名:Dom.classList.toggle(classname) code示例 html: <button id="change_red">变为红类</button> <button id="change_ -
js 选项卡、添加类名(需要查重)和移除类名(不需要查重)
2018-03-09 08:47:02//先把原先的类名和传进来的类名按照空格进行切割 var arr1 = ele.className.split( " " ); var arr2 = cName.split( " " ); var arr3 = arr1.concat(arr2); console.log(arr3); /*for(var i = 0; i ;... -
原生js添类名,删除类名
2019-05-31 17:57:14代码 dom.classList.add('要添加的类名') dom.classList.remove('要移除的类名') dom表示被选中的dom元素 -
原生JS添加类名 删除类名
2018-07-26 15:30:32用途:主要用来给元素动态添加和移除css样式。将样式封装,避免样式代码冗余。 <div class="myDIV"></div> <style> .mystyle{ display="none"... -
JS 添加类名/删除类名
2017-10-30 10:03:00为 元素添加 class:document.getElementById(“myDIV”).classList.add(“mystyle”);为 元素添加多个类:document.getElementById(“myDIV”).classList.add(“mystyle”, ...为 元素移除一个类:document.getElement -
移除类名没有触发transition_28.Vue 动画 transition使用过渡类名实现动画
2020-12-04 05:31:10概述Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接... -
js添加和移除指定类名
2020-10-10 15:03:14<style type="text/css"> .img1 { filter: saturate(5); -webkit-filter: saturate(5); } .img{transition: all .5s;} </style> <div id="app"> ... -
原生js对类名的增删改
2019-05-17 17:50:27为 元素添加 class: document.getElementById(“myDIV”).classList.add(“mystyle”); 为 元素添加多个类: document.getElementById(“myDIV”).classList.add(“mystyle”, ...为 元素移除一个类: document.getE... -
js移除某个class_用JS添加和删除class类名
2021-01-14 11:25:37下面介绍一下如何给一个节点添加和删除class名添加:节点.classList.add("类名");删除:节点.classList.remove("类名");以tab切换为例:在写tab切换的时候,通常我们会给选中的tab设置不同的样式,常用的方法是给... -
js移除某个样式_js中如何移除css样式?
2020-12-19 14:02:16JavaScript是一门运行在浏览器上的脚本语言,能够操作dom元素的属性、样式,下面我们来学习下如何使用js移除元素的css样式。js中如何移除css样式?dom元素应用css有两种方式:● 通过class类名和id名应用样式● 通过... -
jq 移除包含某个字符串的类名js
2016-04-13 16:00:00el.removeClass (function (index, css) { return (css.match (/(^|\s)star\S+/g) || []).join(' ');//移除以“star”开头的类}); 转载于:https://www.cnblogs.com/rellame/p/5387502.html -
JS中从字符串提取整数,取类名,添加与移除类
2017-08-01 23:07:47JS中从字符串提取整数,取类名,添加与移除类今天修改的项目内容主要包含了四点: 对jQuery用法的理解 将类名提取出来 从字符串中提取一个整数 通过jQuery对类进行添加与删除 对jQuery用法的理解在今天的项目修改中... -
点击按钮给标签添加class类名,跳转页面保留class类名,直到再点击按钮移除class
2019-01-02 08:40:48点击切换按钮(button或什么其他标签都行)给最外层的div添加个切换背景的class类名,让页面背景变成黑色,但在跳转页面的时候让class类名保留,直到再点击按钮移除class类名,切换到白色。 最好是js,或jq!! ... -
js移除某个样式_js外部样式和style属性的添加移除
2020-12-19 14:02:15在页面中,往往一个控件的外部样式或者内部样式往往不只一个,而我们只需操作其中一个样式该怎么办呢?...1.外部样式class的添加删除Html:document.getElemntById("元素id").addClass("样式类名");do... -
055JS-classList返回元素的类名
2020-07-24 12:44:36.classList.add(‘类名’) .classList.remove(‘类名’) 切换类名 .classList.toggle(...该属性用于在元素中添加,移除及切换 CSS 类。 classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。 ... -
js 获取元素属性的值 || 设置元素属性的值 || 移除属性 || 增删改查类名
2019-10-28 17:20:04移除元素的属性: element . removeAttribute ( "属性" ) ; // 4 操作元素的类 // 4.1 添加一个或多个类名 element . classList . add ( 'classone' , 'classtwo' , ··· ) ; // 4.2 删除一个或...
收藏数
88
精华内容
35
-
改性绝缘体硅晶圆中的亚稳电子陷阱
-
python中怎么取两个列表 集合的交集
-
三菱FX5U系列PLC表格定位指令TBL出现偶尔不执行的处理对策.docx
-
Qt项目 多彩进度条.zip
-
[机器学习]线性回归
-
win10 wamp laravel8.5 的php的display_errors值修改
-
sys0222.zip
-
pytorch之dataloader深入剖析
-
真正的力量是可以发掘无限的潜能
-
Galera 高可用 MySQL 集群(PXC v5.7+Hapro)
-
CSS 让背景图自适应width
-
hadoop3.3.0多节点(ubuntu下)完全分布式安装
-
极客大学go训练营,极客算法训练营,极客python,怎么选择?
-
ggplot去掉背景网格线和更改为白色背景
-
Colors.rar
-
Java程序的运行机制
-
鸿蒙系统Harmonyos源码架构分析-第1期第2课
-
最全编程开发常用单词词汇
-
Exe动态导入模型.rar
-
git指令