精华内容
下载资源
问答
  • js 添加类名

    2017-02-14 17:27:00
    1 var s="<li class=\"show\">"+init[i]+"</li>"; js添加类名 转载于:https://www.cnblogs.com/gf1394/p/6398563.html
    1 var s="<li class=\"show\">"+init[i]+"</li>";

    js 中添加类名

    转载于:https://www.cnblogs.com/gf1394/p/6398563.html

    展开全文
  • js添加类名

    2019-11-19 14:26:06
    js添加类名 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...

    用js添加类名

    在这里插入图片描述

    <!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>
        <script src="./vue.js"></script>
        <script src="./index.js"></script>
        <link rel="stylesheet" href="./index.css">
    </head>
    <style>
      .active{
          background:#409EFF
      }
    </style>
    <body>
        <div id="app" style="width:500px; margin:0 auto">
            <el-button v-for="(buttonArr, index) in buttons">{{buttonArr.primary}}</el-button>
        </div>
    </body>
    <script>
      var app = new Vue({
          el:"#app",
          data(){
              return{
               buttons:[{
                  primary:'默认按钮'
               }, {
                  primary:'默认按钮' 
               }, {
                  primary:'默认按钮' 
               },{
                  primary:'默认按钮' 
               }],
              }
          },
          mounted(){
              var arr = document.getElementsByClassName("el-button")
              for(var i=0; i<arr.length;i++){
                  arr[i].classList.add("active")
                  i++
              }
          }
      })
    </script>
    </html>
    
    展开全文
  • js添加类名实现按钮切换 方法一:` <div class=“buttons” @click=“tap”> 全部(320000) 好评(32) 中评(32) 差评(0) js: // 点击评价 tap(e) { if (e.target.className === ‘button’) { for (var...

    js添加类名实现按钮切换

    方法一:` <div class=“buttons” @click=“tap”>

    全部(320000)

    好评(32)

    中评(32)

    差评(0)


    js:
    // 点击评价
    tap(e) {
    if (e.target.className === ‘button’) {
    for (var i = 0; i < e.target.parentNode.children.length; i++) {
    e.target.parentNode.children[i].className = ‘button’
    }
    e.target.className = ‘buttonss’
    }
    },
    方法二:

    是否授权查看健康档案
    <van-button
    ref=“a”
    color="#F6F6F5"
    @click.native=“tap(this)”
    :class=“isActive ? ‘hospital’ :‘van-button–default’”
    >授权
    <van-button
    ref=“b”
    color="#F5F5F5"
    @click.native=“no(this)”
    :class=“Active ? ‘hospital’ :‘van-button–default’”
    >不授权

    data中定义:
    isActive: false,
    Active: false,
    js:
    // 点击授权按钮
    tap (e) {
    this.isActive = true
    this.Active = false
    },
    // 点击不授权按钮
    no () {
    this.isActive = false
    this.Active = !this.isActive
    },

    展开全文
  • 原生js添加类名

    万次阅读 2018-01-18 23:48:01
     当然,有很多js库中封装了添加类名的方法,典型的比如jquery中的addClass()方法。但是,在实际开发中,如果页面比较简单,逻辑功能不是特别复杂的时候。还是推荐用原生的js来实现这些功能,这样能够有效的提升...

         动态添加class类名在前端开发过程中是很常见得做法,比如说在实现轮播图的时候给当前图片的锚点添加一个active类,有又或者在实现动画的时候添加一个终态css类。

        当然,有很多js库中封装了添加类名的方法,典型的比如jquery中的addClass()方法。但是,在实际开发中,如果页面比较简单,逻辑功能不是特别复杂的时候。还是推荐用原生的js来实现这些功能,这样能够有效的提升用户的体验效果。试想一下,如果你开发的一个页面总共也就几百行代码,用户每次使用的时候还要去加载几k甚至几十k的js库文件。对于用户而言,这个体验效果可想而知。

    首先,我们了解下js有哪些可以设置class的方法。主要有三种,el.setAttribute('class','class1'),el.setAtrribute('className','class2')以及el.className='class3'.

     

    .class1{
    width:50px;
    backgroud-color:red;
    height:40px;
    }
    .class2{
    width:100px;
    height:200px;
    background-color:#cccccc
    }
    .class3{
    width:20px;
    height:50px;
    background-color:green;
    }

    el.setAttribute('class','class1')

     兼容性  ie7及ie7以下版本不支持

    <div id='test1'></div>
    <script>
    document.getElementById('test1').setAttribute('class','class1')
    </script>

    el.setAttribute('className', 'class2') 

    兼容性:恰好和el.setAttribute('class','class1')相反,不兼容ie7+ /Firefox/Safari/Chrome/Opera 兼容ie7及ie7以下版本

     

    <div id='test2'></div>
    <script>
    document.getElementById('test2').setAttribute('className','class2')
    </script>

    el.className='class3'

    兼容性:所有浏览器都支持 ,有没有很兴奋,哈哈哈。终于找到你,还好我没放弃。

    废话不多说,先来段代码

     

    <div id='test3'></div>
    <script>
    document.getElementById('test3').className='class3'
    </script>

    你以为这样就没了么,js其实还有别的方法可以添加class类名哦,下面我们就来看看。

    Element.classList   https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList


    Element.classList 是一个只读属性,返回一个元素的类属性的实时 DOMTokenList集合。

     

     

     

    add( String [, String] )

    添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。

    // div是具有class =“foo bar”的<div>元素的对象引用
    div.classList.add("anotherclass");

    说到这里,就来多提一下Element.classList吧

     

    它总共有五种方法add( String [, String] )  remove( String [,String] )  item ( Number ) toggle ( String [, force] ) contains( String )

     

    remove( String [,String] )

    删除指定的类值。

    item ( Number )

    按集合中的索引返回类值。

    toggle ( String [, force] )

    当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。

    当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它

    contains( String )

    检查元素的类属性中是否存在指定的类值。

    // div是具有class =“foo bar”的<div>元素的对象引用
    div.classList.remove("foo");
    div.classList.add("anotherclass");
    
    // 如果visible被设置则删除它,否则添加它
    div.classList.toggle("visible");
    
    // 添加/删除 visible,取决于测试条件,i小于10
    div.classList.toggle("visible", i < 10);
    
    alert(div.classList.contains("foo"));
    
    //添加或删除多个类
    div.classList.add("foo","bar");
    div.classList.remove("foo", "bar");

    备注:关于element.classList的介绍以及实例来自于MDN,链接我在上边已经给出,想要了解更多请查看MDN上的接口文档

    今天就到这里吧,分享是一种快乐,学习是一种习惯。

    关注博主公众号,获取更多前端干货!

     

     

     

    展开全文
  • 1.添加类名 document.getElementsByClassName('myEL')[0].classList.add('checked'); 2.删除类名 document.getElementsByClassName('myEL')[0].classList.remove('checked'); 3.包含类名 document....
  • 1.添加类名: document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名: document.getElementById("...
  • 原生JS添加类名 删除类名

    千次阅读 2019-09-04 15:48:01
    元素添加 class: document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass".....
  • JS 添加类名/删除类名

    千次阅读 2017-10-30 10:03:00
    为 元素添加 class:document.getElementById(“myDIV”).classList.add(“mystyle”);为 元素添加多个类:document.getElementById(“myDIV”).classList.add(“mystyle”, “anotherClass”, “thirdClass”);为 ...
  • 为 元素添加 class: document.getElementById("myDIV").classList.add("mystyle");   为 元素添加多个类: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");   为
  • 为 元素添加 class: document.getElementById("myDIV").classList.add("mystyle");   为 元素添加多个类: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");...
  • JS删除类名和添加类名

    千次阅读 2019-06-28 21:40:02
    添加类名 element.classList.add(class1, class2, ...); 兼容IE8的写法 function addClass(el, className) { var oldClassStr = ''; //先判断元素中是否有class属性 if(ele.getAttribute('class')){ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 575
精华内容 230
关键字:

js添加类名