精华内容
下载资源
问答
  • 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;
    }
    
    更多相关内容
  • 取与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下: 代码如下: var p_class = $(“p”).attr(“class”); //获取p元素的class [html] 使用attr...
  • } 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>
    
    展开全文
  • <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)
    	}
    }
    
    展开全文
  • 应用多种多样,有时需要给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 如下:

    1. 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 如下:

    javascript删除img的class属性

    var obj = document.getElementById("imgId");

    obj.removeAttribute("class");

    四、js删除class之table

    假如有 tabel 如下:

    javascript删除table的class属性有两种方法

    var obj = document.getElementById("tableId");

    obj.removeAttribute("class");

    展开全文
  • 点击元素后,获取元素中data-select值,赋值给catalogSelect,然后判断二者是否相等,一样则添加classclass的css可以先写好)。 !--页面-- v ...       微信小程序不允许DOM操作,所以不能用addClass这种方法,...
  • 都在注释上哈,很简单,看一下就懂了,就不啰嗦了// 用来获取元素 ...//获取元素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:37
    1、移除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的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素复制代码 代码如下:原生的JS获取ID为test的元素下的子元素。可以用:var a = docuemnt.getElementById("test")....
  • //获取id document.getElementById() //获取标签 document.getElementsByTagName() //获取类名 document.getElementsByClassName() //获取name属性 document.getElementsByName() //获取body标签 document...
  • 1、先声明一个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  * 1.调整封装  * 2.设置获取innerHTML里面的值  * 3.设置获取CSS样式并且设置  * 4.获取某个元素并设置  * 5.获取某一区域的CSS(这里获取ID的区域)设置 base.js /*前台...
  • 1jq获取元素的值 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 获取当前点击元素的文字 点击当前标签给其添加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动态的给被点击的元素添加class名字,使其变色,其他的删除class。 这里用了mu-button按钮组件。 <mu-button round v-for="(type,index) in goodsType" color=...
  • 获取元素 document.getElementById通过id名字获取节点 <div id="box"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul...
  • //删除id for(i=0;i150;i++){ var idObject = document.getElementById('sidebar'); if (idObject != null) idObject.parentNode.removeChild(idObject);...//通过class获取元素 paras = document.ge
  • 一、jquery获取节点及获取一些属性//一下是js里面的代码$(function(){//$para $符...// 获取第二个元素节 点 var $li = $("ul li:eq(1)"); // 输出元素节点属性title var p_txt = $para.attr("title"); // 获取
  • js删除dom元素的子元素When you have a DOM element reference you can remove a class using the remove method: 当您具有DOM元素引用时,可以使用remove方法删除一个类: element.classList.remove('myclass')...
  • 1.想要获取当前点击的元素,以及父元素、子元素、兄弟元素,第一步我们需要先绑定事件 例如:<li class="del" @click="del($event)">删除</li> //当前点击的元素 e.target //绑定事件的元素 ...
  • 381. O(1) 时间插入、删除获取随机元素 - 允许重复 设计一个支持在平均 时间复杂度 O(1) 下, 执行以下操作的数据结构。 注意: 允许出现重复元素。 insert(val):向集合中插入元素 val。 remove(val):当 val 存在...
  • 01-获取元素-获取单个元素-querySelector <body> <!-- 先写静态结构:前端开发的第一任务 --> <div class="head"> 头部内容 </div> <div class="content" id="content"> 主体...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 335,178
精华内容 134,071
关键字:

获取class元素并删除

友情链接: splitewords.rar