Skip to content

Commit 1535fb6

Browse files
anbanganbang
committed
DOM的CSS操作
1 parent c96f2c5 commit 1535fb6

2 files changed

Lines changed: 226 additions & 11 deletions

File tree

‎DOM2/DOM2操作CSS/readme.md‎

Lines changed: 152 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,156 @@ offsetLeft 和 offsetTop 属性与包含元素有关，包含元素的引用保
302302

303303
主要用于确定元素内容的实际大小。例如，通常认为 <html> 元素是在 Web 浏览器的视口中滚动的元素（IE6 之前版本运行在混杂模式下时是 <body> 元素）。因此，带有垂直滚动条的页面总高度就是 document.documentElement.scrollHeight 。
304304

305-
在不包含滚动条的时候， scrollWidth / scrollHeight 与 clientWidth / clientHeight 之间在不同浏览器的区别
305+
**document.documentElement**在不包含滚动条的时候， scrollWidth / scrollHeight 与 clientWidth / clientHeight 之间在不同浏览器的区别
306306

307-
- Firefox中：都是文档内容
307+
- Firefox中：都是文档内容,而非视口内容
308+
- Opera、Safari 3.1 及更高版本、Chrome 中的这两组属性是有差别的，其中 scrollWidth 和 scrollHeight 等于视口大小，而 clientWidth 和 clientHeight 等于文档内容区域的大小。
309+
- IE（在标准模式）中的这两组属性不相等，其中 scrollWidth 和 scrollHeight 等于文档内容区域的大小，而 clientWidth 和 clientHeight 等于视口大小。
310+
311+
可以在不同浏览器下看属性；代码如下；
312+
313+
console.log(document.documentElement.scrollHeight+"---"+document.documentElement.clientHeight);
314+
console.log(document.documentElement.scrollWidth+"---"+document.documentElement.clientWidth);
315+
316+
**在确定文档的总高度时，必须取得 scrollWidth / clientWidth 和scrollHeight/clientHeight 中的最大值,才能保证在跨浏览器的环境下得到精确的结果**
317+
318+
var docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
319+
var docWidth=Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
320+
321+
**scrollLeft / scrollTop**可设置的；
322+
323+
一般用在做返回顶部的功能；如果当前和顶部的距离不是0，说明已经滚动了；设置他的scrollTop为0就可以返回原位了；
324+
325+
function scrollToTop(element){
326+
if (element.scrollTop != 0){
327+
element.scrollTop = 0;
328+
}
329+
}
330+
331+
##### getBoundingClientRect方法
332+
333+
这个方法返回会一个矩形对象，包含 4 个属性： left 、 top 、 right 和 bottom 。这些属性给出了,元素在页面中相对于视口的位置;如果用offset和offsetParent配合做距离页面的距离，需要做很多兼容；但是用getBoundingClientRect方法比较简单；但也是有兼容性问题的；
334+
335+
兼容问题主要在IE678这些低版本浏览器；
336+
337+
IE8 及更早版本认为文档的左上角坐标是(2, 2)，而其他浏览器包括 IE9 则将传统的(0,0)作为起点坐标。因此，就需要在一开始检查一下位于(0,0)处的元素的位置，在 IE8 及更早版本中，会返回(2,2)，而在其他浏览器中会返回(0,0)。
338+
339+
如果不兼容IE678可以直接的使用；getBoundingClientRect()方法；如果需要兼容低版本IE，可以下面这么写；
340+
341+
342+
<!doctype html>
343+
<html>
344+
<head>
345+
<meta charset="UTF-8">
346+
<title>Document</title>
347+
<link rel="stylesheet" href="test.css" id="test-css-link"/>
348+
<style>
349+
#myList{
350+
width: 100px;
351+
height: 100px;
352+
background-color: #CDE074;
353+
border: 1px dashed darkcyan;
354+
padding: 5px;
355+
position: absolute;
356+
left: 500px;
357+
top: 200px;
358+
}
359+
</style>
360+
</head>
361+
<body>
362+
<div id="myList"></div>
363+
<script>
364+
var odiv = document.getElementById("myList");
365+
366+
console.log("原生的getBoundingClientRect方法");
367+
console.log(odiv.getBoundingClientRect().top);//200
368+
console.log(odiv.getBoundingClientRect().right);//612
369+
console.log(odiv.getBoundingClientRect().bottom);//312
370+
console.log(odiv.getBoundingClientRect().left);//500
371+
372+
console.log("自定义的getBoundingClientRect方法");
373+
console.log(getBoundingClientRect(odiv).top);//200
374+
console.log(getBoundingClientRect(odiv).right);//612
375+
console.log(getBoundingClientRect(odiv).bottom);//312
376+
console.log(getBoundingClientRect(odiv).left);//500
377+
378+
function getBoundingClientRect(element){
379+
if (typeof arguments.callee.offset != "number"){
380+
var scrollTop = document.documentElement.scrollTop;
381+
var temp = document.createElement("div");
382+
temp.style.cssText = "position:absolute;left:0;top:0;";
383+
document.body.appendChild(temp);
384+
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
385+
document.body.removeChild(temp);
386+
temp = null;
387+
}
388+
var rect = element.getBoundingClientRect();
389+
var offset = arguments.callee.offset;
390+
console.log("偏差值offset的值是:"+offset);
391+
return {
392+
left: rect.left + offset,
393+
right: rect.right + offset,
394+
top: rect.top + offset,
395+
bottom: rect.bottom + offset
396+
};
397+
}
398+
</script>
399+
</body>
400+
</html>
401+
402+
getBoundingClientRect返回参数的示意图；
403+
404+
![](http://i.imgur.com/rhPip4F.png)
405+
406+
于不支持 getBoundingClientRect() 的浏览器，可以通过其他手段取得相同的信息。一般来说， right 和 left 的差值与 offsetWidth 的值相等，而 bottom 和 top 的差值与 offsetHeight相等。而且， left 和 top 属性大致等于使用本章前面定义的 getElementLeft() 和 getElementTop()函数取得的值。综合上述，就可以创建出下面这个跨浏览器的函数
407+
408+
409+
function getBoundingClientRect(element){
410+
var scrollTop = document.documentElement.scrollTop;
411+
var scrollLeft = document.documentElement.scrollLeft;
412+
if (element.getBoundingClientRect){
413+
if (typeof arguments.callee.offset != "number"){
414+
var temp = document.createElement("div");
415+
temp.style.cssText = "position:absolute;left:0;top:0;";
416+
document.body.appendChild(temp);
417+
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
418+
document.body.removeChild(temp);
419+
temp = null;
420+
}
421+
var rect = element.getBoundingClientRect();
422+
var offset = arguments.callee.offset;
423+
return {
424+
left: rect.left + offset,
425+
right: rect.right + offset,
426+
top: rect.top + offset,
427+
bottom: rect.bottom + offset
428+
};
429+
} else {
430+
var actualLeft = getElementLeft(element);
431+
var actualTop = getElementTop(element);
432+
return {
433+
left: actualLeft - scrollLeft,
434+
right: actualLeft + element.offsetWidth - scrollLeft,
435+
top: actualTop - scrollTop,
436+
bottom: actualTop + element.offsetHeight - scrollTop
437+
}
438+
}
439+
}
440+
function getElementLeft(element){
441+
var actualLeft = element.offsetLeft;
442+
var current = element.offsetParent;
443+
while (current !== null){
444+
actualLeft += current.offsetLeft;
445+
current = current.offsetParent;
446+
}
447+
return actualLeft;
448+
}
449+
function getElementTop(element){
450+
var actualTop = element.offsetTop;
451+
var current = element.offsetParent;
452+
while (current !== null){
453+
actualTop += current. offsetTop;
454+
current = current.offsetParent;
455+
}
456+
return actualTop;
457+
}

‎test-file.html‎

Lines changed: 74 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,85 @@
44
<meta charset="UTF-8">
55
<title>Document</title>
66
<link rel="stylesheet" href="test.css" id="test-css-link"/>
7+
<style>
8+
#myList{
9+
width: 100px;
10+
height: 100px;
11+
background-color: #CDE074;
12+
border: 1px dashed darkcyan;
13+
padding: 5px;
14+
position: absolute;
15+
left: 500px;
16+
top: 200px;
17+
}
18+
</style>
719
</head>
820
<body>
9-
<div id="myList" style="width: 100px;height: 100px;background-color: #CDE074;border: 1px dashed darkcyan;padding: 5px;"></div>
21+
<div id="myList"></div>
1022
<script>
11-
var oCssLink = document.getElementById("test-css-link");
12-
console.log(oCssLink.disabled);
13-
console.log(oCssLink.href);
14-
console.log(document.styleSheets.href);
15-
console.log(oCssLink.media);
16-
console.log(oCssLink.title);
17-
console.log(oCssLink.type);
23+
var odiv = document.getElementById("myList");
1824

19-
var docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
25+
console.log("原生的getBoundingClientRect方法");
26+
console.log(odiv.getBoundingClientRect().top);//200
27+
console.log(odiv.getBoundingClientRect().right);//612
28+
console.log(odiv.getBoundingClientRect().bottom);//312
29+
console.log(odiv.getBoundingClientRect().left);//500
2030

31+
console.log("自定义的getBoundingClientRect方法");
32+
console.log(getBoundingClientRect(odiv).top);//200
33+
console.log(getBoundingClientRect(odiv).right);//612
34+
console.log(getBoundingClientRect(odiv).bottom);//312
35+
console.log(getBoundingClientRect(odiv).left);//500
36+
37+
function getBoundingClientRect(element){
38+
var scrollTop = document.documentElement.scrollTop;
39+
var scrollLeft = document.documentElement.scrollLeft;
40+
if (element.getBoundingClientRect){
41+
if (typeof arguments.callee.offset != "number"){
42+
var temp = document.createElement("div");
43+
temp.style.cssText = "position:absolute;left:0;top:0;";
44+
document.body.appendChild(temp);
45+
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
46+
document.body.removeChild(temp);
47+
temp = null;
48+
}
49+
var rect = element.getBoundingClientRect();
50+
var offset = arguments.callee.offset;
51+
return {
52+
left: rect.left + offset,
53+
right: rect.right + offset,
54+
top: rect.top + offset,
55+
bottom: rect.bottom + offset
56+
};
57+
} else {
58+
var actualLeft = getElementLeft(element);
59+
var actualTop = getElementTop(element);
60+
return {
61+
left: actualLeft - scrollLeft,
62+
right: actualLeft + element.offsetWidth - scrollLeft,
63+
top: actualTop - scrollTop,
64+
bottom: actualTop + element.offsetHeight - scrollTop
65+
}
66+
}
67+
}
68+
function getElementLeft(element){
69+
var actualLeft = element.offsetLeft;
70+
var current = element.offsetParent;
71+
while (current !== null){
72+
actualLeft += current.offsetLeft;
73+
current = current.offsetParent;
74+
}
75+
return actualLeft;
76+
}
77+
function getElementTop(element){
78+
var actualTop = element.offsetTop;
79+
var current = element.offsetParent;
80+
while (current !== null){
81+
actualTop += current. offsetTop;
82+
current = current.offsetParent;
83+
}
84+
return actualTop;
85+
}
2186
</script>
2287
</body>
2388
</html>

0 commit comments

Comments
 (0)