Skip to content

Commit c96f2c5

Browse files
anbanganbang
committed
DOM STYLE
1 parent 300c01b commit c96f2c5

File tree

4 files changed

+129
-30
lines changed

4 files changed

+129
-30
lines changed

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

Lines changed: 114 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,3 @@
1-
#JS中的盒子模型
2-
3-
clientWidth;//获取元素的可见宽度。width+左右padding；
4-
clientHeight;//获取元素的可见高度。width+上下padding；
5-
clientLeft;//获取元素的左边框宽度
6-
clientTop;//获取元素的上边框高度；
7-
8-
offsetWidth;//获取元素width+左右padding+左右border；
9-
offsetHeight;//获取元素的width+上下padding+上下border；
10-
offsetLeft;//获取元素距离父级参照物的左偏移量；
11-
offsetTop;//获取元素距离父级参照物的上偏移量；
12-
offsetParent;//获取元素的父级参照物/上级参照物（和parentNode区分开）
13-
14-
window.onscroll;//随时的计算当前页面距离body顶部的偏移量(左上角)；
15-
scrollWidth;//获取元素实际内容的宽，在没有内容溢出的情况下和clientWidth一样，有内容的溢出，则是width+左padding；
16-
scrollHeight;//获取元素实际内容的宽，在没有内容溢出的情况下和clientWidth一样，有内容的溢出，则是width+左padding；
17-
scrollLeft;//横向滚动条卷去的高度，这是一个可读写的属性；设置scrollLeft=0；就回到了页面横向第一屏最上边；
18-
scrollTop;//纵向滚动条卷去的高度，这是一个可读写的属性；设置scrollTop=0；就回到了页面纵向第一屏最上边；
19-
20-
21-
JS中没有直接获取margin值的属性；
22-
231

242
**jQuery中的盒子模型**:
253

@@ -94,7 +72,7 @@ JS中没有直接获取margin值的属性；
9472
----------
9573

9674

97-
# 知识点：访问和设置元素的样式；
75+
# 知识点一：访问和设置元素的样式；
9876

9977

10078
##### 获取样式
@@ -214,3 +192,116 @@ getComputerStyle第二种写法
214192
return element.currentStyle[value];
215193
}
216194
}
195+
196+
# 知识点二：操作样式表；
197+
198+
- disabled
199+
- href
200+
- media
201+
- ownerNode 指向拥有当前样式表的节点的指针，样式表可能是在 HTML 中通过 < link > 或 < style /> 引入的,如果当前样式表是其他样式表通过@import 导入的，则这个属性值为 null 。IE 不支持这个属性。
202+
- parentStyleSheet 在当前样式表是通过 @import 导入的情况下，这个属性是一个指向导入它的样式表的指针。
203+
- type 表示样式表类型的字符串。对 CSS 样式表而言，这个字符串是 "type/css" 。
204+
205+
除了 disabled 属性之外，其他属性都是只读的。在支持以上所有这些属性的基础上，CSSStyleSheet 类型还支持下列属性和方法
206+
207+
- cssRules
208+
- ownerRule
209+
- deleteRule
210+
- insertRule
211+
212+
213+
# 知识点三：元素大小
214+
215+
**JS中的盒子模型**
216+
217+
clientWidth;//获取元素的可见宽度。width+左右padding；
218+
clientHeight;//获取元素的可见高度。width+上下padding；
219+
clientLeft;//获取元素的左边框宽度
220+
clientTop;//获取元素的上边框高度；
221+
222+
offsetWidth;//获取元素width+左右padding+左右border+（可见的）垂直滚动条的宽度；
223+
offsetHeight;//获取元素的width+上下padding+上下border+（可见的）水平滚动条的高度；
224+
offsetLeft;//获取元素距离父级参照物的左偏移量；
225+
offsetTop;//获取元素距离父级参照物的上偏移量；
226+
offsetParent;//获取元素的父级参照物/上级参照物（和parentNode区分开）
227+
228+
window.onscroll;//随时的计算当前页面距离body顶部的偏移量(左上角)；
229+
scrollWidth;//获取元素实际内容的宽，在没有内容溢出的情况下和clientWidth一样，有内容的溢出，则是width+左padding；
230+
scrollHeight;//获取元素实际内容的宽，在没有内容溢出的情况下和clientWidth一样，有内容的溢出，则是width+左padding；
231+
scrollLeft;//横向滚动条卷去的高度，这是一个可读写的属性；设置scrollLeft=0；就回到了页面横向第一屏最上边；
232+
scrollTop;//纵向滚动条卷去的高度，这是一个可读写的属性；设置scrollTop=0；就回到了页面纵向第一屏最上边；
233+
234+
235+
JS中没有直接获取margin值的属性；
236+
237+
##### 客户区相关的
238+
239+
![](http://i.imgur.com/oaKk1jG.png)
240+
241+
##### 偏移量相关的
242+
243+
![](http://i.imgur.com/nTWwumg.png)
244+
245+
246+
offsetLeft 和 offsetTop 属性与包含元素有关，包含元素的引用保存在 offsetParent属性中。 offsetParent 属性不一定与parentNode 的值相等。
247+
248+
**offsetParent取决于position，parentNode取决于DOM结构**
249+
250+
如果获取元素距离页面左上角的绝对位置，可以下面这么写；
251+
252+
function getElementLeft(element){
253+
var actualLeft = element.offsetLeft;
254+
var current = element.offsetParent;
255+
while (current !== null){
256+
actualLeft += current.offsetLeft;
257+
current = current.offsetParent;
258+
}
259+
return actualLeft;
260+
}
261+
262+
function getElementTop(element){
263+
var actualTop = element.offsetTop;
264+
var current = element.offsetParent;
265+
while (current !== null){
266+
actualTop += current. offsetTop;
267+
current = current.offsetParent;
268+
}
269+
return actualTop;
270+
}
271+
272+
这两个函数利用 offsetParent 属性在 DOM 层次中逐级向上回溯，将每个层次中的偏移量属性合计到一块。对于简单的 CSS 布局的页面，这两函数可以得到非常精确的结果。对于使用表格和内嵌框架布局的页面，由于不同浏览器实现这些元素的方式不同，因此得到的值就不太精确了。一般来说，页面中的所有元素都会被包含在几个 <div> 元素中，而这些 <div> 元素的 offsetParent 又是<body> 元素，所以 getElementLeft() 与 getElementTop() 会返回与 offsetLeft 和 offsetTop
273+
相同的值。
274+
275+
在IE中有些问题，封一个方法，可以直接获取到元素的所有绝对偏移量；
276+
277+
function offset(curEle) {//获取偏移量；
278+
var par = curEle.offsetParent,
279+
left = curEle.offsetLeft,
280+
top = curEle.offsetTop;
281+
while (par) {
282+
left += par.offsetLeft;
283+
top += par.offsetTop;
284+
if (navigator.userAgent.indexOf("MSIE 8.0") <= -1) {
285+
left += par.clientLeft;
286+
top += par.clientTop;
287+
}
288+
par = par.offsetParent;
289+
}
290+
return {left: left, top: top};
291+
}
292+
293+
> 所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性；如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能。
294+
295+
##### 滚动相关的
296+
297+
![](http://i.imgur.com/J7WbqWk.png)
298+
[图片引自高程三]
299+
300+
301+
** scrollWidth 和 scrollHeight的作用**
302+
303+
主要用于确定元素内容的实际大小。例如，通常认为 <html> 元素是在 Web 浏览器的视口中滚动的元素（IE6 之前版本运行在混杂模式下时是 <body> 元素）。因此，带有垂直滚动条的页面总高度就是 document.documentElement.scrollHeight 。
304+
305+
在不包含滚动条的时候， scrollWidth / scrollHeight 与 clientWidth / clientHeight 之间在不同浏览器的区别
306+
307+
- Firefox中：都是文档内容

‎DOM操作和封装DOM库/DOM操作.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# DOM操作
2+

‎test-file.html‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,21 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Document</title>
6+
<link rel="stylesheet" href="test.css" id="test-css-link"/>
67
</head>
78
<body>
8-
<div id="myList" style="width: 100px;height: 100px;background-color: #CDE074;border: 1px dashed darkcyan;"></div>
9+
<div id="myList" style="width: 100px;height: 100px;background-color: #CDE074;border: 1px dashed darkcyan;padding: 5px;"></div>
910
<script>
10-
var oDiv = document.getElementById("myList");
11-
var targetObj=oDiv.currentStyle;
12-
console.log(targetObj.width);//100px
13-
console.log(targetObj.height);//100px
14-
console.log(targetObj.padding);//0
15-
console.log(targetObj);
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);
18+
19+
var docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
20+
1621
</script>
1722
</body>
1823
</html>

‎test.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
body{ background-color: #008CD7; }

0 commit comments

Comments
 (0)