Case 1: Select all
Application knowledge points: ondblclick=() | onclick | Find tag attributes, judgments and functions applications
Case 2: Single choice
You can only choose one, and use js to change its options
Application knowledge points: getElementsByTagName%20|%20checked%20|%20mutex
Case 3: Cloning
Case 4: Custom attributes, get custom attributes and change the tag content
Case 5: Three ways to get the values in the input box
Method 2: Query
Method 3: id
Case 6:
Case 7:
Case 8: Head menu
Case 9: Return to the top
Main knowledge points: onscroll%20 and document.body.scrollTop;
Case 10:
Main knowledge points:
//scroll%20 scroll; the meaning of scroll
//%20scrollTop:%20 scrollbar height from top
//%20scrollHeight:%20 Document height: itself + padding
//%20clientTop:%20 border height
//%20clientHeight:%20 The current range visible height: itself%20+%20padding
//offset%20 printing meaning
//%20offsetTop:%20 The height of the current label from "top" (body)
//%20 If there is no post in his previous level, if there is, the position tag is mainly based on the position tag.
//%20offsettHeight:%20 The height of its own range: itself + padding + border
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="height: 20px;background-color: green;"></div><!--head--> <div style="border: 5px solid pink;padding: 10px;"><!--body--> <div> <div id="xo" style="height: 200px;overflow: auto;width: 400px;margin: 0 auto;border: 15px solid red;padding: 3px;" > <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div> <div>sdf</div> </div> </div> </div> </div> </div> <script> var ii = document.getElementById('xo') console.log(ii.scrollTop) console.log(ii.scrollHeight) console.log(ii.clientTop) console.log(ii.clientHeight) console.log(ii.offsetTop) console.log(ii.offsetHeight) //scroll Scroll; scroll meaning // scrollTop: scrollbar height from the top // scrollHeight: Document height: itself + padding// clientTop: border height // clientHeight: visible range height: itself + padding //offset Print meaning // offsetTop: The current label distance from the "top" (body)// If there is no post on the previous level, if there is one, the position label is mainly used // offsetHeight: The visible range height: itself + padding+border </script> </body></html>Okay, I'll introduce it here for the time being. I hope everyone will write more and practice more, mainly the logic. Of course, many people are starting to use jquery now, so everyone should pay more attention.