js的自定义dataset对象 ,js操作css， js中事件的添加与删除

程序员文章站 2022-04-21 10:51:45

...

用户自定义属性

主要用于js脚本控制，以data-为前缀


  <body>
    <div class="btn-group">
      <button data-index="1" onclick="getIndex(this)">btn1</button>
      <button data-index="2" onclick="getIndex(this)">btn2</button>
      <button data-index="3" onclick="getIndex(this)">btn3</button>
    </div>
  </body>

onclick是预定义属性
data-index是自定义属性
js的自定义dataset对象 ,js操作css， js中事件的添加与删除
看清上图中，不要加“data-”

再看一个例子
js的自定义dataset对象 ,js操作css， js中事件的添加与删除

注意，“price-lowest”转成驼峰写法“priceLowest”，否则中间的哪个短横会被当做减号。干脆就别用短横，用下划线。

dataset可读可写。


      xiGua.dataset.priceLowest = 1.3;
      console.log(xiGua.dataset.priceLowest);

js操作css


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div style="color: red; background-color: lightcyan">hello</div>

    <script>
      const div = document.querySelector("div");
      console.log(div.style.color);
      console.log(div.style.height); // 用style只能拿到行内样式，拿不到width和height

      console.log(window.getComputedStyle(div).width);
      console.log(window.getComputedStyle(div).backgroundColor);

      const width = window.getComputedStyle(div).width;
      console.log(width, typeof width); // 拿到的width是个string
      console.log(typeof parseInt(width)); // 拿到的width是个string
      div.style.width = parseInt(width) * 2 + "px";  // 这样宽度就扩大了2倍
    </script>
  </body>
</html>

js的自定义dataset对象 ,js操作css， js中事件的添加与删除

js操作css的class属性


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .red {
        color: red;
      }
      .bgc {
        background-color: yellow;
      }
      .blue {
        color: blue;
      }
      .bd {
        border: 5px solid black;
      }
    </style>
  </head>
  <body>
    <h2>hello</h2>
    <script>
      const h2 = document.querySelector("h2");
      //   h2.className = "red bgc"; // 这样的方式可以

      //   建议下面这种用法
      h2.classList.add("red");
      h2.classList.add("bgc");

      // contains用于判断
      console.log(h2.classList.contains("bgc")); // 返回true
      // remove用于移除
      h2.classList.remove("bgc");
      //replace用于替换
      h2.classList.replace("red", "blue"); // 第一个参数是被替换的
      //   toggle用于切换
      h2.classList.toggle("bd");
      h2.classList.toggle("bd");
    </script>
  </body>
</html>

js的自定义dataset对象 ,js操作css， js中事件的添加与删除

js中事件的添加与删除


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>元素对象1</button>
    <button>元素事件监听器</button>
    <button>事件派发</button>
    <script>
      const btn1 = document.querySelector("button:first-of-type");
      btn1.onclick = function () {
        console.log(event);
      };
      btn1.onclick = null; // 删除事件

      const btn2 = document.querySelector("button:nth-of-type(2)");
      function show() {
        console.log(event);
      }
      btn2.addEventListener("click", show); //添加事件
      btn2.removeEventListener("click", show); // 移除事件

      const btn3 = document.querySelector("button:nth-of-type(3)");
      // 先添加一个事件，然后自动触发他
      let i = 0;
      btn3.addEventListener(
        "click",
        () => {
          console.log("恭喜，又赚了：" + i + "元");
          i += 0.8;
        },
        false
      );
      //创建一个自定义事件
      const myclick = new Event("click");
      btn3.dispatchEvent(myclick);
      btn3.dispatchEvent(myclick);
      btn3.dispatchEvent(myclick);
      btn3.dispatchEvent(myclick);

      //一次性定时器
      setTimeout(() => btn3.dispatchEvent(myclick), 2000);

      //连续定时器
      setInterval(() => btn3.dispatchEvent(myclick), 1000);
    </script>
  </body>
</html>

上一篇： alibaba图标库

下一篇： dom元素的增删改操作

js的自定义dataset对象 ,js操作css， js中事件的添加与删除

用户自定义属性

js操作css

js操作css的class属性

js中事件的添加与删除

React.Js添加与删除onScroll事件的方法详解

js中的触发事件对象event.srcElement与event.target详解

优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发

JS动态添加与删除select中的Option对象(示例代码)_javascript技巧

js的自定义dataset对象 ,js操作css， js中事件的添加与删除

原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX

js的自定义dataset对象 ,js操作css， js中事件的添加与删除

通过js获取元素表单以及遍历dom树和对元素的增删改查js操作内容演练实战了留言板的操作并对自定义属性: dataset对象初步的了解以及对js操作class和classList属性对象事件的添加与删除练习与了解

闭包及访问量属性和类与对象解构赋值以及js中对html中的dom操作(时间有点紧，没全理解透，需回头整理)