之前做过两道前端，阿里和网易各一道。下文内容和解题的核心并无关系，只是当时想了解jQuery那么处理原生js的原理是什么，所以小结一下。
题目一：判断两个矩形元素是否重叠。
开始无尽的跑偏。。。。
Html元素都是HTMLElement实例，下例将div换成script、html都成立。
HTMLElement继承自Element，Element继承自Node。
定义一个长宽都是500px的红色div。
但是.style.height的方式获取不到高度值。如果使用style设置高度是有效的，再读取就是设置过的高度。
查看jQuery获取高度的方法，可发现这个属性: offsetHieght。offsetHieght是HTMLElement的只读属性，与此相似的还有Element的scrollHeight、clientHeight。运行以下代码可以理解它们之间的不同。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style>
7 #parent{
8 width: 500px;
9 height: 500px;
10 background: red;
11 overflow: auto;
12 border: 5px;
13 padding: 5px;
14 margin: 5px;
15 }
16 #child{
17 width: 800px;
18 height: 800px;
19 background: blue;
20 border: 5px;
21 padding: 5px;
22 margin: 5px;
23 }
24 </style>
25
26 </head>
27 <body>
28 <div id = ‘parent‘>
29 <div id = ‘child‘>
30 </div>
31 </div>
32 <button onclick=‘show()‘>click</button>
33 <script>
34 var parent = document.querySelector(‘#parent‘);
35 var child = document.querySelector(‘#child‘);
36
37 //包含内边距和边框
38 console.log(‘offsetHeight‘); //510 510 810 810
39 console.log(parent.offsetHeight);
40 console.log(parent.offsetWidth);
41 console.log(child.offsetHeight);
42 console.log(child.offsetWidth);
43
44 //取元素内容宽度和元素本身宽度更大者
45 console.log(‘scrollHeight‘); //830 820 810 810
46 console.log(parent.scrollHeight);
47 console.log(parent.scrollWidth);
48 console.log(child.scrollHeight);
49 console.log(child.scrollWidth);
50
51 //只包含内边距，不包含滚动条、边框、外边距
52 console.log(‘clientHeight‘); //493 493 810 810
53 console.log(parent.clientHeight);
54 console.log(parent.clientWidth);
55 console.log(child.clientHeight);
56 console.log(child.clientWidth);
57
58 function show(){
59 //相对上一级的偏移
60 console.log(‘offsetTop‘); //510 510 810 810
61 console.log(parent.offsetTop);
62 console.log(parent.offsetLeft);
63 console.log(child.offsetTop);
64 console.log(child.offsetLeft);
65
66 //滚动条卷进去的偏移
67 console.log(‘scrollTop‘); //830 820 810 810
68 console.log(parent.scrollTop);
69 console.log(parent.scrollLeft);
70 console.log(child.scrollTop);
71 console.log(child.scrollLeft);
72
73 //边框的厚度
74 console.log(‘clientTop‘); //493 493 810 810
75 console.log(parent.clientTop);
76 console.log(parent.clientLeft);
77 console.log(child.clientTop);
78 console.log(child.clientLeft);
79 }
80
81 </script>
82 </body>
83 </html>
跑偏完毕。
题目一的解答:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style>
7 #parent{
8 width: 300px;
9 height: 300px;
10 margin-left: 100px;
11 }
12 #div1{
13 width: 200px;
14 height: 200px;
15 background: red;
16 }
17 #div2{
18 width: 300px;
19 height: 300px;
20 background: blue;
21 position: relative;
22 top: -200px;
23 }
24 </style>
25 </head>
26 <body>
27 <div id=‘parent‘>
28 <div id = ‘div1‘>
29 </div>
30 </div>
31 <div id = ‘div2‘>
32 </div>
33 <script>
34 var div1 = document.querySelector(‘#div1‘);
35 var div2 = document.querySelector(‘#div2‘);
36
37 function isOverlap(e1,e2){
38 var overlapX = false,
39 overlapY = false,
40
41 top1 = e1.offsetTop,
42 top2 = e2.offsetTop,
43
44 left1 = e1.offsetLeft,
45 left2 = e2.offsetLeft,
46
47 height1 = e1.offsetHeight,
48 height2 = e2.offsetHeight,
49
50 width1 = e1.offsetWidth,
51 width2 = e2.offsetWidth;
52
53 if(top1<top2 ){
54 if(top1+height1>top2){
55 overlapY = true;
56 }
57 } else {
58 if(top2+height2>top1){
59 overlapY = true;
60 }
61 }
62
63 if(left1>left2 ){
64 if(left1+width1>left2){
65 overlapX = true;
66 }
67 } else {
68 if(left2+width2>left1){
69 overlapX = true;
70 }
71 }
72
73 return overlapX && overlapY;
74 }
75
76 if(isOverlap(div2,div1)){
77 alert(‘重叠了‘);
78 } else {
79 alert(‘没重叠‘);
80 }
81
82 </script>
83 </body>
84 </html>
题目二：可以说忘了吗^_^#，大致和通用事件注册，事件代理，列表选择有关。
这里我只关心如何改变一个div的样式。
Element的ClassName属性以字符串的形式保存拥有的class名称，多个class名空格隔开。
jQuery提供了addClass、removeClass、toggleClass操作元素的class。如果想使用原生js，并且通过类来改变div样式，难道必须进行字符串操作吗？
HTML5给Element带来一个新属性——classList，操作示例如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style>
7 .size{
8 width: 100px;
9 height: 100px;
10 }
11 .blue{
12 background: blue;
13 }
14 .red{
15 background: red;
16 }
17 </style>
18 </head>
19 <body>
20 <div class="size blue">
21 </div>
22 <script>
23 var div = document.querySelector(‘div‘);
24 console.log(div.className); //"size blue"
25
26 div.classList.add(‘red‘);
27 console.log(div.className); //"size blue red"
28
29 div.classList.remove(‘red‘);
30 console.log(div.className); //"size blue"
31
32 if(!div.classList.contains(‘red‘)){
33 console.log(‘类已被移除‘);
34 }
35
36 div.onclick = function(){
37 div.classList.toggle(‘red‘);
38 };
39 </script>
40 </body>
41 </html>
随着越来越强大的新标准推行，原生js也简洁起来咯~
时间： 2024-10-01 18:49:15