样式
计算的样式
myDiv = document.getElementById('myDiv');
var myDivStyle = document.defaultView.getComputedStyle(myDiv, null); //第二个参数可以是伪元素,如“:after”;ie9+
alert(myDivStyle.width);
var myDivStyle = document.defaultView.currentStyle(myDiv); //only IE
alert(myDivStyle.width);
元素大小
偏移量
function getElementLeft(element) {
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while(current !== null) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element) {
var actualTop = element.offsetTop;
var current = element.offsetParent;
while(current !== null) {
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
客户区的大小
function getViewport() {
if(document.compatMode == 'BackCompat') {
return { //ie7-
width: document.body.clientWidth,
height: document.body.clientHeight
};
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
};
}
}
滚动条的大小
//文档总高度
var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);
//重置滚动
function scrollToTop(element) {
if(element.scrollTop != 0) {
element.scrollTop = 0;
}
}
确定元素大小
function getBoundingClientRect(element) {
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
if(element.getBoundingClientRect) {
if(typeof(arguments.callee.offset) != "number") {
var scrollTop = document.documentElement.scrollTop;
var temp = document.createElement('div');
temp.style.cssText = 'position: absolute;left: 0;top: 0;';
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
temp = null;
};
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
return {
left: rect.left + offset,
rigfht: rect.right + offset,
top: rect.top + offset,
bottom: rect.bottom + offset
};
} else {
var actualLeft = getElementLeft(element);
var actualTop = getElementTop(element);
return {
left: actualLeft - scrollLeft,
right: actualLeft + element.offsetWidth - scrollLeft,
top: actualTop - scrollTop,
bottom: actualTop + element.offsetHeight - scrollTop
}
}
}
范围
DOM中的范围
- 用DOM范围实现简单选择
<p id="p1"><b>hello</b> world</p>
var range1 = document.createRange(); //ie9+
var range2 = document.createRange();
var p1 = document.getElementById('p1');
range1.selectNode(p1);
range2.selectNodeContents(p1);
- 用DOM范围实现复杂选择
var range1 = document.createRange(); //ie9+
var range2 = document.createRange();
var p1 = document.getElementById('p1');
var p1Index = -1;
var i, len;
for(i = 0, len = p1.parentNode.childNodes.length; i < len; i++) {
if(p1.parentNode.childNodes[i] == p1) {
p1Index = i;
break;
}
}
range1.setStart(p1.parentNode, p1Index + 1); //ie not sup
range1.setEnd(p1.parentNode, p1Index + 1);
range2.setStart(p1, 0);
range2.setEnd(p1, p1.childNodes.length);
var p1 = document.getElementById('p1'),
helloNode = p1.firstChild,
worldNode = p1.lastChild,
range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);
- 插入DOM范围中的内容
<span style="color: red;">Inserted text</span>
var p1 = document.getElementById('p1'),
helloNode = p1.firstChild.firstChild,
worldNode = p1.lastChild,
range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);
var span = document.createElement('span');
span.style.color = 'red';
span.appendChild(document.createTextNode('Inserted text'));
range.insertNode(span);
- 比较DOM范围
range.compareBoundaryPoints()
- 复制DOM范围
var newRange = range.cloneRange();
- 清理DOM范围
range.detach(); //从文档中分离
range = null; //解除引用