1. Change the style of the element

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > < / title > < / head > < body > < div id =" box "> < / div > < / body > < / HTML > < style > # box {width: 30 px; height: 30px; background: red; } </style> <script> setTimeout(() => { let box = document.querySelector('#box'); box.style.width = '100px'; box.style.height = '100px'; }, 1000); </script>Copy the code

(1) Box.style.csstext

<script> setTimeout(() => { let box = document.querySelector('#box'); box.style.cssText = "width:100px; height:100px;" ; }, 1000); </script>Copy the code

(2) box-classname = ‘big’;

<style> #box { width: 30px; height: 30px; background: red; } .big{ width: 100px ! important; height: 100px ! important; } </style> <script> setTimeout(() => { let box = document.querySelector('#box'); box.className="big" }, 1000); </script>Copy the code

3. New browser mechanism: render queue mechanism

let box = document.querySelector('#box'); box.style.width = '100px'; console.log(box.style.width); / / / for style: style.css. XXX getComputedStyle/getBoundingClientRect/clientWidth... /offsetWidth... /scrollWidth... Refresh browser render queue box.style.height = '100px'; // There is no more code to change the style, it will also trigger the refresh of the render queueCopy the code

4, read and write separation

(1) We try to separate set styles from get styles

box.style.width = '100px';
box.style.height = '100px';
console.log(box.style.width);
Copy the code

(2) We will change the style on the original basis

Box-style. width = parseFloat(window.getcomputedStyle (box)['width']) + 100 + 'px'; box.style.height = parseFloat(window.getComputedStyle(box)['height']) + 100 + 'px'; + prevW = parseFloat(window.getComputedStyle(box)['width']), prevH = parseFloat(window.getComputedStyle(box)['height']); box.style.width = prevW + 100 + 'px'; box.style.height = prevH + 100 + 'px';Copy the code

5. Rotation chart

(1) We originally intended to implement this (but we found that it could not be implemented because of the browser’s render queue mechanism)

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial scale=1.0"> <title></title> </head> <body> <div class="container"> <div class="wrapper"> <div class="slide"> <img src="images/1.jpg" alt=""> </div> <div class="slide"> <img src="images/2.webp" alt=""> </div> <div class="slide"> <img src="images/3.webp" alt=""> </div> <div class="slide"> <img src="images/4.webp" alt=""> </div> <! - clone - > < div class = "slide" > < img SRC = "images / 1. JPG" Alt = "" > < / div > < / div > < / div > < / body > < / HTML > < style > * {margin: 0; padding: 0; } .container { position: relative; width: 800px; height: 300px; margin: 20px auto; overflow: hidden; } .container .wrapper { position: absolute; top: 0; left: 0; z-index: 10; width: 4000px; height: 300px; display: flex; justify-content: flex-start; align-items: center; /* animations */ Transition: left.3s linear 0s; } .container .wrapper .slide { width: 800px; height: 300px; } .container .wrapper .slide img { display: block; width: 800px; height: 300px; } </style> <script> let wrapper = document.querySelector('.wrapper') step = 0, timer = null timer = setInterval(function () { step++ if (step >= 5) { wrapper.style.transition = 'left 0s'; wrapper.style.left = 0 step = 1 } wrapper.style.transition = `left .3s` wrapper.style.left = `-${step * 800}px` }, 2000) </script>Copy the code

(2) modify to make it come true

<script> let wrapper = document.querySelector('.wrapper') step = 0, timer = null timer = setInterval(function () { step++ if (step >= 5) { wrapper.style.transition = 'left 0s'; Step = 1} wrapper.style. Transition = 'left.3s' wrapper.style.left = `-${step * 800}px` }, 2000) </script>Copy the code

(1) This creates dom backflow 10 times

<style> #box { height: 30px; display: flex; } #box span { width: 30px; height: 30px; } #box span:nth-child(even) { background: red; } </style> <script> setTimeout(() => { let box = document.getElementById('box') for (var i = 0; i < 10; i++) { var span = document.createElement('span') span.innerHTML = i box.appendChild(span) } }, 1000); </script>Copy the code

(2) String stitching

<script> let box = document.getElementById('box') let str = `` for (var i = 0; i < 10; i++) { str += `<span>${i + 1}</span>` box.innerHTML = str } </script>Copy the code

(3) Document fragments

<script> let box = document.getElementById('box') let frag = document.createDocumentFragment() let str = `` for (var i = 0; i < 10; i++) { var span = document.createElement('span') span.innerHTML = i + 1 frag.appendChild(span) } box.appendChild(frag) </script>Copy the code