本文深入探讨了如何利用DOM API操控网页样式与布局，包括访问和修改元素样式、操作样式表、创建和删除CSS规则，以及获取计算样式。此外，还介绍了如何测量元素的尺寸，包括偏移量、客户区大小和滚动大小。
目录
样式
在 HTML 中定义样式的方式有 3 种：通过<link/>元素包含外部样式表文件、使用<style/>元素定义嵌入式样式，以及使用 style 特性定义针对特定元素的样式。
//确定浏览器是否支持 DOM2 级定义的 CSS 能力
var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");访问元素的样式
在 style 特性中指定的任何 CSS 属性都将表现为这个style 对象的相应属性。对于使用短划线（分隔不同的词汇，例如 background-image）的 CSS 属性名，必须将其转换成驼峰大小写形式，才能通过 JavaScript 来访问。
var myDiv = document.getElementById("myDiv");
//设置背景颜色
myDiv.style.backgroundColor = "red";
//改变大小
myDiv.style.width = "100px";
myDiv.style.height = "200px";
//指定边框
myDiv.style.border = "1px solid black";DOM 样式属性和方法
“DOM2 级样式”规范还为 style 对象定义了一些属性和方法。这些属性和方法在提供元素的 style特性值的同时，也可以修改样式。
cssText：通过它能够访问到 style 特性中的 CSS 代码。
length：应用给元素的 CSS 属性的数量。
parentRule：表示 CSS 信息的 CSSRule 对象。
getPropertyCSSValue(propertyName)：返回包含给定属性值的 CSSValue 对象。
getPropertyPriority(propertyName)：如给定的属性使用了!important 设置，则返回"important"；否则，返回空字符串。
getPropertyValue(propertyName)：返回给定属性的字符串值。
item(index)：返回给定位置的 CSS 属性的名称。
removeProperty(propertyName)：从样式中删除给定属性。
setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先权标志（"important"或者一个空字符串）。
myDiv.style.cssText = "width: 25px; height: 100px; background-color: green";
alert(myDiv.style.cssText);
//设计 length 属性的目的，就是将其与 item()方法配套使用，以便迭代在元素中定义的 CSS 属性。
for (var i=0, len=myDiv.style.length; i < len; i++){
alert(myDiv.style[i]); //或者 myDiv.style.item(i)
}
//可以在 getPropertyValue()中使用取得的属性名进一步取得属性的值
var prop, value, i, len;
for (i=0, len=myDiv.style.length; i < len; i++){
prop = myDiv.style[i]; //或者 myDiv.style.item(i)
value = myDiv.style.getPropertyValue(prop);
alert(prop + " : " + value);
}
var prop, value, i, len;
for (i=0, len=myDiv.style.length; i < len; i++){
prop = myDiv.style[i]; //或者 myDiv.style.item(i)
value = myDiv.style.getPropertyCSSValue(prop);
alert(prop + " : " + value.cssText + " (" + value.cssValueType + ")");
}
myDiv.style.removeProperty("border");计算的样式
“DOM2 级样式”增强了 document.defaultView，提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如":after"）。如果不需要伪元素信息，第二个参数可以是 null。getComputedStyle()方法返回一个 CSSStyleDeclaration 对象（与 style 属性的类型相同），其中包含当前元素的所有计算的样式。
<!DOCTYPE html>
<html>
<head>
<title>Computed Styles Example</title>
<style type="text/css">
#myDiv {
background-color: blue;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<div id="myDiv" style="background-color: red; border: 1px solid black"></div>
</body>
</html>var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); // "red"
alert(computedStyle.width); // "100px"
alert(computedStyle.height); // "200px"
alert(computedStyle.border); // 在某些浏览器中是"1px solid black"操作样式表
CSSStyleSheet 类型表示的是样式表，包括通过<link>元素包含的样式表和在<style>元素中定义的样式表。
var sheet = null;
for (var i=0, len=document.styleSheets.length; i < len; i++){
sheet = document.styleSheets[i];
alert(sheet.href);
}
//在不同浏览器中都能取得样式表对象
function getStyleSheet(element){
return element.sheet || element.styleSheet;
}
//取得第一个<link/>元素引入的样式表
var link = document.getElementsByTagName("link")[0];
var sheet = getStylesheet(link);CSS 规则
CSSRule 对象表示样式表中的每一条规则。实际上， CSSRule 是一个供其他多种类型继承的基类a型，其中最常见的就是 CSSStyleRule 类型，表示样式信息（其他规则还有@import、 @font-face、@page 和@charset，但这些规则很少有必要通过脚本来访问）。
CSSStyleRule 对象包含下列属性。
cssText：返回整条规则对应的文本。由于浏览器对样式表的内部处理方式不同，返回的文本可能会与样式表中实际的文本不一样； Safari 始终都会将文本转换成全部小写。 IE 不支持这个属性。
parentRule：如果当前规则是导入的规则，这个属性引用的就是导入规则；否则，这个值为null。 IE 不支持这个属性。
parentStyleSheet：当前规则所属的样式表。 IE 不支持这个属性。
selectorText：返回当前规则的选择符文本。由于浏览器对样式表的内部处理方式不同，返回的文本可能会与样式表中实际的文本不一样（例如， Safari 3 之前的版本始终会将文本转换成全部小写）。在 Firefox、 Safari、 Chrome 和 IE 中这个属性是只读的。 Opera 允许修改 selectorText。
style：一个 CSSStyleDeclaration 对象，可以通过它设置和取得规则中特定的样式值。
type：表示规则类型的常量值。对于样式规则，这个值是 1。 IE 不支持这个属性。
/*
div.box {
background-color: blue;
width: 100px;
height: 200px;
}
*/
//获取
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules; //取得规则列表
var rule = rules[0]; //取得第一条规则
alert(rule.selectorText); //"div.box"
alert(rule.style.cssText); //完整的 CSS 代码
alert(rule.style.backgroundColor); //"blue"
alert(rule.style.width); //"100px"
alert(rule.style.height); //"200px"
//设置
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules; //取得规则列表
var rule = rules[0]; //取得第一条规则
rule.style.backgroundColor = "red"创建规则
sheet.insertRule("body { background-color: silver }", 0); //DOM 方法
sheet.addRule("body", "background-color: silver", 0); //仅对 IE 有效
function insertRule(sheet, selectorText, cssText, position){
if (sheet.insertRule){
sheet.insertRule(selectorText + "{" + cssText + "}", position);
} else if (sheet.addRule){
sheet.addRule(selectorText, cssText, position);
}
}
insertRule(document.styleSheets[0], "body", "background-color: silver", 0);删除规则
sheet.deleteRule(0); //DOM 方法
sheet.removeRule(0); //仅对 IE 有效
function deleteRule(sheet, index){
if (sheet.deleteRule){
sheet.deleteRule(index);
} else if (sheet.removeRule){
sheet.removeRule(index);
}
}
deleteRule(document.styleSheets[0], 0);元素大小
偏移量（offset dimension）
元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意，不包括外边距）。通过下列 4 个属性可以取得元素的偏移量。
offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离
/*要想知道某个元素在页面上的偏移量，将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent
的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值。*/
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;
}客户区大小（client dimension）
function getViewport(){
if (document.compatMode == "BackCompat"){
return {
width: document.body.clientWidth,
height: document.body.clientHeight
};
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
};
}
}滚动大小（scroll dimension）
/*
在确定文档的总高度时（包括基于视口的最小高度时），必须取得 scrollWidth/clientWidth 和
scrollHeight/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 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,
right: 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
}
}
}
扫一扫
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
