Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 【JS】 dataset对象 、操作CSS 与 classList对像：操作元素
Blogger Information
Blog 94
fans 0
comment 0
visits 92651
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
【JS】 dataset对象 、操作CSS 与 classList对像：操作元素
可乐随笔
Original
563 people have browsed it

dataset对象 、操作CSS 与 classList对像：操作元素

1.dataset对象

  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>dataset对象</title>
  8. </head>
  9. <body>
  10.     <!--
  11.         * 1. 预定义：id,class,style,title...
  12.         * 2. 自定义：data- 前缀
  13.     -->
  15.     <!-- data-: 自定义属性的前缀 -->
  16.     <div data-email="nx99@qq.com" data-my-name="老马">我的邮箱</div>
  17.     <script>
  18.         const div = document.querySelector('div');
  19.         // console.log(div.dataset['email']);//同下 
  20.         console.log(div.dataset.email);
  21.         //my-name：转为小驼：myName
  22.         console.log(div.dataset.myName)
  23.     </script>
  24. </body>
  25. </html>

2.操作CSS

关键问题：
1.找到元素
2.操作元素的行内样式

  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>操作CSS</title>
  8.     <style>
  9.         div{
  10.             width: 200px;
  11.             height: 50px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div style="color:red;background-color:lightblue">hello world</div>
  18.     <script>
  19.         //获取行内样式style
  20.         const div = document.querySelector('div');
  21.         console.log(div.style.color);
  22.         console.log(div.style.backgroundColor);
  24.         //文档样式用style获取不到
  25.         // console.log(div.style.width)
  27.         //一个元素，最终样式，也叫计算样式，是由多个类型的样式构成：外部、文档、行内样式
  28.         //拿到一个元素的计算样式：getComputedStyle(元素)
  29.         console.log(window.getComputedStyle(div).width);
  30.         //取数值
  31.         let width = window.getComputedStyle(div).width;
  32.         width = parseInt(width);
  33.         console.log(width,typeof width);
  34.         //给Div增加宽度,修改div的行内样式
  35.         div.style.width = width + 100 + 'px';
  36.         console.log(window.getComputedStyle(div).width);
  37.     </script>
  38. </body>
  39. </html>

3.classList对像：操作元素

classList:管理元素的class属性

方法:
1.add()：添加
2.remove()：移除
3.replace()：替换
4.toggle()：切换
5.contains()：判断

  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>classList对像：操作元素</title>
  8. </head>
  9. <body>
  10.     <h1>hello world!</h1>
  11.     <style>
  12.         .red {
  13.             color:red;
  14.         }
  15.         .blue {
  16.             color:blue;
  17.         }
  18.         .bgc {
  19.             background-color: yellow;
  20.         }
  21.     </style>
  22.     <script>
  23.         //classList:管理元素的class属性
  24.         const h1 = document.querySelector('h1');
  26.         //1. 添加:add()
  27.         // h1.classList.add('red');
  28.         // h1.classList.add('blue','bgc');
  29.         const styles = ['red','bgc'];
  30.         h1.classList.add(...styles);
  32.         //2.判断：contains()
  33.        // 判断是否有某个样式 console.log(h1.classList.contains('bgc'))
  35.         //3.替换：replace()
  36.         h1.classList.replace('red','blue');
  38.         //4.移除： remove()
  39.         h1.classList.remove('blue','bgc');
  41.         //5.切换：toggle()
  42.         //切换：有该class，就remove()；没有就add();
  43.         h1.classList.toggle('red');
  44.         h1.classList.toggle('red');
  46.     </script>
  47. </body>
  48. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post