zoukankan      html  css  js  c++  java
  • js之给元素添加类的方法

    原生js中添加类的方法
    //1.为 <div> 元素添加一个类:
    document.getElementById("div").classList.add("类名");
    
    //2.为 <div> 元素添加多个类:
    document.getElementById("div").classList.add("类名1","类名2","类名3",...);
    
    //3.为 <div> 元素移除一个类:
    document.getElementById("div").classList.remove("类名");
    
    //4.为 <div> 元素移除多个类:
    document.getElementById("div").classList.remove("类名1","类名2","类名3",...);
    
    .jquery中添加类的方法
    //1.为 <div> 元素添加一个类:
    $("#div").addClass("类名");
    
    //2.为 <div> 元素添加多个类:
    //只需要通过空格来间隔 class 值即可一次性添加多个 class
     $("#div").addClass("类名1 类名2 类名3");
    
    //3.为 <div> 元素移除一个类:
    $("#div").removeClass("类名");
    
    //4.为 <div> 元素移除多个类:
    //只需要通过空格来间隔 class 值即可一次性清除掉多个 class
     $("#div").removeClass("类名1 类名2 类名3");
    
    检查是否含有某个类的方法
    //检查是否含有某个CSS类
    div.classList.contains('类名'); //return true or false
    

    例子:
    html部分

    <div class="test" id="test">
     啦啦啦
    </div>
    

    css部分

    .test{
       100px;
      height: 100px;
      background: #B6BAC4;
    }
    .test1{
      border: 1px solid;
       200px;
      border-radius: 4px;
    }
    .test2{
      margin: 0 auto;
    }
    .test3{
      font-size: 50px;
    }
    

    js部分

    // 覆盖原来的样式
    document.getElementById("test").setAttribute("class","test1");
    var dom=document.getElementsByClassName("test")[0].setAttribute("class","test1");
    // 追加样式不覆盖原来的样式
    document.getElementById("test").classList.add("test1");
    document.getElementById("test").classList.add("test1","test2","test3");
    var dom=document.getElementsByClassName("test")[0].classList.add("test1");
    var dom=document.getElementsByClassName("test")[0].classList.add("test1","test2","test3");
    
  • 相关阅读:
    POJ 3422 Kaka's Matrix Travels(最小费用最大流)
    POJ 2195 Going Home(最小费用最大流)
    POJ 3694 Network(双连通分量)
    POJ 2942 Knights of the Round Table(双连通分量)
    POJ 1275 Cashier Employment(差分约束)
    Codeforces Round #224 (Div. 2)
    POJ 2983 Is the Information Reliable?(差分约束系统)
    POJ 3159 Candies(差分约束)
    学习笔记之设计模式 | 菜鸟教程
    学习笔记之编译器的工作过程 | 菜鸟教程
  • 原文地址:https://www.cnblogs.com/jessie-xian/p/11576367.html
Copyright © 2011-2022 走看看