4-样式操作与属性操作（补充案例）-CSDN博客

本文链接：https://blog.csdn.net/qq_44808878/article/details/114743574

四.样式操作与属性操作（补充案例）

案例

改名字

 <style>
    .nav{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .aa{color:red}
    .bb{font-weight: bold}
  </style>
</head>
<body>
  <div id="wrap" class="aa">文字</div>
  <script>
    let oWrap = document.getElementById("wrap");

    // 比较生硬
    // oWrap.className += " aa bb"; 不推荐这种写法

    //用classList来代替className操作名字

    //添加名字
    // oWrap.classList.add("bb");
    // oWrap.classList.add("nav","bb","aa");

    //移除名字
    // oWrap.classList.remove("aa");

    //切换名字
    oWrap.classList.toggle("bb");
    oWrap.classList.toggle("aa");
    </script>

2.toggle

  <style>
    #nav{
      width: 100px;
      height: 30px;
      background-color: pink;
      cursor: pointer;
      transition: height 1s;
    }
    #nav.slide{
      height: 150px;
    }
  </style>
</head>
<body>
  <div id="nav"></div>
  <script>
    let oNav = document.getElementById("nav");
    oNav.onclick = function(){
      oNav.classList.toggle("slide");
    };
  </script>

3.回顾补充获取元素标签的方式

	/*通过id获取*/
   let a = document.getElementById("nav");
    console.dir(a);

    /*通过class名字获取*/
    let b = document.getElementsByClassName("gd");
    console.log(b);
    b[0].id = "wrap";
    b[1].title = "这是提示";

    /*通过标签名获取*/
    let c = document.getElementsByTagName("div");
    console.log(c);

    /*通过name获取*/
    let d = document.getElementsByName("user");
    console.log(d);

4.操作行内样式

例1

<style>
    #nav{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div id="nav"></div>
  <script>
    let oNav = document.getElementById("nav");
    document.onclick = function(){
        
      // console.log( oNav.className );
      console.log( oNav.style );

      oNav.style.width = "200px";
      oNav.style.backgroundColor = "red";

      //关于float的兼容
      /*oNav.style.cssFloat = "left";
      oNav.style.styleFloat = "left";*/

      // 这是不合理的写法
      // oNav.style = "background-color:red;"
    };
  </script>

例2

  <style>
    #nav{
      width: 100px;
      height: 100px;
      background-color: pink;
      color: green;
    }
    #nav.xx{
      color: red;
    }
  </style>
</head>
<body>
  <div id="nav">sssss</div>
  <script>
    let oNav = document.getElementById("nav");

    document.onclick = function(){
      oNav.classList.add("xx");
    };
  </script>