-
2019-05-10 16:53:51
在vue中当我们要实现点击元素动态添加类名时,我们不能像JQ那样去用(xxx.addClass(‘class’).siblings().removeClass(‘class’))实现,那我们应该怎样去做呢
解决方案:
1.在data里面申明一个属性,默认值最好为数字类型,并且不得大于当前元素+所有兄弟元素的length,可以默认为0(第一个元素选中)2.在当前元素中添加动态class: “:class”,使用v-bind进行绑定
3.给元素点击事件,传入当前元素的index,把元素当前的index赋值给data里面的申明的属性,这样就可以点击实现该效果
一.首先给想要添加class的元素,通过v-bind绑定一个class
<li :class="activeClass == index ? 'actived':''" v-for="(item,index) in itemList" :key="index" @click="getItem(index)"> {{itme.name}} </li>
二.在data中声明一个变量activeClass
data() { return { activeClass: -1, // 0为默认选择第一个,-1为不选择 }; }
三.在点击事件中
getItme(index) { this.activeClass = index; // 把当前点击元素的index,赋值给activeClass }
四.在style里面写想要的样式就可以了
.actived { background: #eee; color: #1e82d2; font-weight: bolder; }
更多相关内容 -
jquery 如何动态添加、删除class样式方法介绍
2020-12-11 14:23:24取与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下: 代码如下: var p_class = $(“p”).attr(“class”); //获取p元素的class [html] 使用attr... -
js 获取元素类名以及添加删除指定类名element.classList.toggle()
2020-08-11 21:29:50} style> head> <body> <div class="one two">div> 开关灯button> <script> //classList 返回元素类名 var div = document.querySelector('div'); //1.添加类名 div.classList.add('three'); //请在运行后按f12查看...<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg { background-color: black; } </style> </head> <body> <div class="one two"></div> <button>开关灯</button> <script> //classList 返回元素类名 var div = document.querySelector('div'); //1.添加类名 div.classList.add('three'); //请在运行后按f12查看类名 //2.删除类名 div.classList.remove('one'); //3.切换类名 // 当存在类名时,取消此类名,当不存在时,添加此类名 document.querySelector('button').addEventListener('click',function () { document.body.classList.toggle('bg'); }) </script> </body> </html>
-
event.target获取点击元素,判断元素并删除其父级节点
2020-12-01 15:28:57<div onclick="onClose(event)"> ... </div>... if(ev.target.attributes['class'].nodeValue=="closeicon"){ ev.target.parentNode.parentNode.removeChild(ev.target.parentNode) } }<div onclick="onClose(event)"> ... </div>
function onClose(ev){ if(ev.target.attributes['class'].nodeValue=="closeicon"){ ev.target.parentNode.parentNode.removeChild(ev.target.parentNode) } }
-
js删除html元素的class属性(div、ul、li、ol、img、table等)
2021-06-12 02:12:17应用多种多样,有时需要给html元素加上class属性,有时又需要把class属性删除。其实不修饰html元素不一定要把class属性删除,可以把它设为空,元素的样式同样不在。在 javascript 中,删除html元素的class属性其实是...使网页变得美观漂亮就要用CSS样式修饰,而作用到具体的html元素上得用class属性。应用多种多样,有时需要给html元素加上class属性,有时又需要把class属性删除。其实不修饰html元素不一定要把class属性删除,可以把它设为空,元素的样式同样不在。
在 javascript 中,删除html元素的class属性其实是移除属性,用 removeAttribute() 方法,不光移除class属性用这个方法,移除html元素的所有属性都用这个方法。
一、js删除class之div
假如有 div 元素如下:
用javascript删除div的class属性用于div的CSS样式为:
.content{width:980px;margin:auto;}
//删除div的class属性
var obj = document.getElementById("divId");
obj.removeAttribute("class");//删除div的class属性
obj.class = "";//设置div的class属性为空
obj.setAttribute("class", "");//设置div的class属性为空(方法二)
二、js删除class之ul li、ol li
1、假如有 ul li 如下:
- javascript删除ul li 的class属性
var ul = document.getElementById("ulId");
ul.removeAttribute("class");//删除ul的class属性
ul.class = "";//设置ul的class属性为空
ul.setAttribute("class", "");//设置ul的class属性为空(方法二)
//删除li的class属性
var li= ul.childNodes;//li是ul的孩子,可通过 childNodes 获得li
for (var i = 0; i < li.length; i++) {
li[i].removeAttribute("class");//循环删除所有li的class属性
}
如果li有Id,也可以通过Id获取li。如果要删除ul的第一个孩子,也可以通过 firstChild 获取;同理要删除ul的最后一个孩子可通过 lastChild 获取;删除中间的孩子在li没有Id的情况下,只能用循环。
2、假如有 ol li 如下:
- javascript删除ol li的class属性
//删除ol的class属性
var ol = document.getElementById("ol");
ol.removeAttribute("class");//删除ol的class属性
//删除ol li的class属性
var ol = document.getElementById("ol");
var li = ol.firstChild;//li是ol的第一个孩子,可通过ol获取li
li.removeAttribute("class");//删除li的class属性
三、js删除class之img
假如有 img 如下:
var obj = document.getElementById("imgId");
obj.removeAttribute("class");
四、js删除class之table
假如有 tabel 如下:
javascript删除table的class属性 有两种方法 var obj = document.getElementById("tableId");
obj.removeAttribute("class");
-
微信小程序点击移除添加class(点击改变背景颜色和字体颜色)
2021-03-29 21:23:06点击元素后,获取元素中data-select值,赋值给catalogSelect,然后判断二者是否相等,一样则添加class(class的css可以先写好)。 !--页面-- v ... 微信小程序不允许DOM操作,所以不能用addClass这种方法,... -
用来获取元素 //用来判断某个元素是否有某个class // 如果没有添加 // 如果有就删除的封装函数
2018-07-03 11:58:06都在注释上哈,很简单,看一下就懂了,就不啰嗦了// 用来获取元素 ...//获取元素id class tag all function M(sele) { var first = sele.substr(0,1), isArr = sele.split(' ');//id class tag... -
js中删除特定ID或特定class的元素
2021-06-13 14:50:371、移除ID名为id_name的元素 var x = document.getElementById("id_name"); //如果对象x不为空 if (x != null) x.remove(); PS:参考链接 https://www.w3school.com.cn/htmldom/met_select_remove.asp 对于... -
JS获取节点的兄弟,父级,子级元素的方法
2020-12-29 14:06:05JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素复制代码 代码如下:原生的JS获取ID为test的元素下的子元素。可以用:var a = docuemnt.getElementById("test").... -
javaScript DOM 获取 (ID 标签 类名 节点 元素 添加 删除 替换)
2020-11-27 10:16:50//获取id document.getElementById() //获取标签 document.getElementsByTagName() //获取类名 document.getElementsByClassName() //获取name属性 document.getElementsByName() //获取body标签 document... -
JS JQuery添加、替换、删除元素class属性
2020-01-06 14:37:261、先声明一个div和两个class样式,用来测试: <html> <head> <meta charset="utf-8"> <title></title> <script src=... -
JQuery获取元素类名
2021-01-14 16:22:10一般而言,JQuery可以利用attr来获取元素的属性值,1、$("元素").attr("属性");//获取指定属性的值2、$("元素").attr("属性","属性值");//设置属性值3、$("元素").removeAttr("属性"); //移除指定属性不过在1.6中... -
js 封装获取class的值、添加class、删除class
2016-10-12 11:10:26js 封装获取class * 1.调整封装 * 2.设置获取innerHTML里面的值 * 3.设置获取CSS样式并且设置 * 4.获取某个元素并设置 * 5.获取某一区域的CSS(这里获取ID的区域)并设置 base.js /*前台... -
jq获取元素的值 、获取相同name元素的值、删除追加html内容、处理事件重复绑定问题
2019-07-01 17:28:041jq获取元素的值 html() 它获取的第一个匹配元素的内容,也就是所取得的标签所包含的所有东西。text() 它获取的是所有匹配元素的内容,而不会选取标签。 同理,text(val)是设置所有匹配元素的文本内容val() 用来... -
vue 使用ref获取DOM元素和组件引用
2021-01-17 18:11:13在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法。HTML部分:这是H3 refJS部分:// 定义一个组件var com1 = {template: `这是子组件的内容`,data() {return {msg: "子组件的数据"}},... -
元素class类名的添加和删除之classList
2018-11-20 15:24:40相信很多人都知道通过element.className的方式给元素添加class属性或获取元素的class属性。本文要介绍的HTML DOM classList是也可用于给元素添加、移除或切换class属性。 classList的基本使用: 一、语法: element.... -
原生JS给DOM元素增加修改删除class
2019-10-16 16:29:55上古时代常用的方法 document.getElementsByTagName('body')[0].... //把所有class替换成指定class document.getElementsByClassName('test')[1].setAttribute("class",'newClass') //与上一个等价 document.ge... -
vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字
2018-05-11 11:12:00vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字 点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址:... -
jquery获取多个class的元素
2017-04-10 14:02:13需求: 获取删除div的id 删除 方法: $(".list-li.active").find(".btn").attr('id'); 交集选择: $(".a.b")--选择同时包含a和b的元素。 并集选择:$(".a, .b")--选择包含a或者包含b的元素 -
原生JS给DOM元素增加修改和删除class
2019-03-11 11:34:58删除class //方法1 如果你的页面里有很多个“temp”类的话 感觉这种不太适合 “classArr ”取出的是类数组 let classArr = document.getElementsByClassName("temp"); classArr[0].classList.remove("red"); /... -
Vue.js实现点击后动态添加class及删除同级class
2020-08-19 11:21:52需要实现一个按钮点击变色的功能,具体方式是通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class。 这里用了mu-button按钮组件。 <mu-button round v-for="(type,index) in goodsType" color=... -
DOM基本操作(获取元素、节点的创建和添加、节点的替换和删除)
2019-09-03 23:16:26获取元素 document.getElementById通过id名字获取节点 <div id="box"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul... -
如何通过class和id使用原生js删除元素?
2018-01-18 11:46:48//删除id for(i=0;i150;i++){ var idObject = document.getElementById('sidebar'); if (idObject != null) idObject.parentNode.removeChild(idObject);...//通过class获取元素 paras = document.ge -
jquery内的元素获取和设置class、value、text
2018-01-17 10:02:00一、jquery获取节点及获取一些属性//一下是js里面的代码$(function(){//$para $符...// 获取第二个元素节 点 var $li = $("ul li:eq(1)"); // 输出元素节点属性title var p_txt = $para.attr("title"); // 获取里 -
js删除dom元素的子元素_如何从DOM元素中删除类
2020-08-27 09:31:08js删除dom元素的子元素When you have a DOM element reference you can remove a class using the remove method: 当您具有DOM元素引用时,可以使用remove方法删除一个类: element.classList.remove('myclass')... -
Vue获取当前点击的元素、子元素、父元素、上一个元素、下一个元素、兄弟元素
2022-03-15 21:29:401.想要获取当前点击的元素,以及父元素、子元素、兄弟元素,第一步我们需要先绑定事件 例如:<li class="del" @click="del($event)">删除</li> //当前点击的元素 e.target //绑定事件的元素 ... -
Java实现 LeetCode 381 O(1) 时间插入、删除和获取随机元素 - 允许重复
2020-03-11 18:18:30381. O(1) 时间插入、删除和获取随机元素 - 允许重复 设计一个支持在平均 时间复杂度 O(1) 下, 执行以下操作的数据结构。 注意: 允许出现重复元素。 insert(val):向集合中插入元素 val。 remove(val):当 val 存在... -
获取单个元素-querySelector/多个元素-querySelectorAll/操作属性-`innerText`-`className`-`src`-`href` ...
2021-04-20 19:41:4901-获取元素-获取单个元素-querySelector <body> <!-- 先写静态结构:前端开发的第一任务 --> <div class="head"> 头部内容 </div> <div class="content" id="content"> 主体...