ASCII码 ASCII码

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

发布于：2022-01-14 09:01:53  栏目：技术文档

用户自定义属性

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

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

onclick是预定义属性data-index是自定义属性看清上图中，不要加“data-”

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

dataset可读可写。

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

js操作css

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       div {
  10.         width: 150px;
  11.         height: 100px;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <div style="color: red; background-color: lightcyan">hello</div>
  18.     <script>
  19.       const div = document.querySelector("div");
  20.       console.log(div.style.color);
  21.       console.log(div.style.height); // 用style只能拿到行内样式，拿不到width和height
  23.       console.log(window.getComputedStyle(div).width);
  24.       console.log(window.getComputedStyle(div).backgroundColor);
  26.       const width = window.getComputedStyle(div).width;
  27.       console.log(width, typeof width); // 拿到的width是个string
  28.       console.log(typeof parseInt(width)); // 拿到的width是个string
  29.       div.style.width = parseInt(width) * 2 + "px";  // 这样宽度就扩大了2倍
  30.     </script>
  31.   </body>
  32. </html>

js操作css的class属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       .red {
  10.         color: red;
  11.       }
  12.       .bgc {
  13.         background-color: yellow;
  14.       }
  15.       .blue {
  16.         color: blue;
  17.       }
  18.       .bd {
  19.         border: 5px solid black;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <h2>hello</h2>
  25.     <script>
  26.       const h2 = document.querySelector("h2");
  27.       //   h2.className = "red bgc"; // 这样的方式可以
  29.       //   建议下面这种用法
  30.       h2.classList.add("red");
  31.       h2.classList.add("bgc");
  33.       // contains用于判断
  34.       console.log(h2.classList.contains("bgc")); // 返回true
  35.       // remove用于移除
  36.       h2.classList.remove("bgc");
  37.       //replace用于替换
  38.       h2.classList.replace("red", "blue"); // 第一个参数是被替换的
  39.       //   toggle用于切换
  40.       h2.classList.toggle("bd");
  41.       h2.classList.toggle("bd");
  42.     </script>
  43.   </body>
  44. </html>

js中事件的添加与删除

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <button>元素对象1</button>
  11.     <button>元素事件监听器</button>
  12.     <button>事件派发</button>
  13.     <script>
  14.       const btn1 = document.querySelector("button:first-of-type");
  15.       btn1.onclick = function () {
  16.         console.log(event);
  17.       };
  18.       btn1.onclick = null; // 删除事件
  20.       const btn2 = document.querySelector("button:nth-of-type(2)");
  21.       function show() {
  22.         console.log(event);
  23.       }
  24.       btn2.addEventListener("click", show); //添加事件
  25.       btn2.removeEventListener("click", show); // 移除事件
  27.       const btn3 = document.querySelector("button:nth-of-type(3)");
  28.       // 先添加一个事件，然后自动触发他
  29.       let i = 0;
  30.       btn3.addEventListener(
  31.         "click",
  32.         () => {
  33.           console.log("恭喜，又赚了：" + i + "元");
  34.           i += 0.8;
  35.         },
  36.         false
  37.       );
  38.       //创建一个自定义事件
  39.       const myclick = new Event("click");
  40.       btn3.dispatchEvent(myclick);
  41.       btn3.dispatchEvent(myclick);
  42.       btn3.dispatchEvent(myclick);
  43.       btn3.dispatchEvent(myclick);
  45.       //一次性定时器
  46.       setTimeout(() => btn3.dispatchEvent(myclick), 2000);
  48.       //连续定时器
  49.       setInterval(() => btn3.dispatchEvent(myclick), 1000);
  50.     </script>
  51.   </body>
  52. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行