javascript与CSS复习（《精通javascript》）
2024-09-06 12:45:33
供稿：网友
如：elem.style.height 或者 elem.style.height = '100px', 这里要注意的是设置任何几何属性必须明确尺寸单位（如px），同时任何几何属性返回的是表示样式的字符串而非数值（如'100px'而非100）。另外像elem.style.height这样的操作，也能获取元素style属性中设置的样式值，如果你把样式统一放在css文件中，上述方法只会返回一个空串。为了获取元素真实、最终的样式，书中给出了一个函数
代码如下:
//get a style property (name) of a specific element (elem)
function getStyle(elem, name) {
// if the property exists in style[], then it's been set
//recently (and is current)
if(elem.style[name]) return elem.style[name];
//otherwise, try to use IE's method
else if (elem.currentStyle) return elem.currentStyle[name];
//Or the W3C's method, if it exists
else if (document.defaultView && document.defaultView.getComputedStyle) {
//it uses the traditional 'text-align' style of rule writing
//instead of textAlign
name = name.replace(/[A-Z]/g, '-$1');
name = name.toLowerCase();
//get the style object and get the value of the property ( if it exists)
var s = document.defaultView.getComputedStyle(elem,'');
return s && s.getPropertyValue(name);
} else return null;
}
理解如何获取元素的在页面的位置是构造交互效果的关键。先复习下css中position属性值的特点。
static：静态定位，这是元素定位的默认方式，它简单的遵循文档流。但元素静态定位时，top和left属性无效。
relative：相对定位，元素会继续遵循文档流，除非受到其他指令的影响。top和left属性的设置会引起元素相对于它的原始位置进行偏移。
absolute：绝对定位，绝对定位的元素完全摆脱文档流，它会相对于它的第一个非静态定位的祖先元素而展示，如果没有这样的祖先元素，它的定位将相对于整个文档。
fixed：固定定位把元素相对于浏览器窗口而定位。它完全忽略浏览器滚动条的拖动。
作者封装了一个跨浏览器的获取元素页面位置的函数
其中有几个重要元素的属性：offsetParent，offsetLeft，offsetTop（可直接点击到Mozilla Developer Center的相关页面）
代码如下:
//find the x (horizontal, Left) position of an element
function pageX(elem) {
//see if we're at the root element, or not
return elem.offsetParent ?
//if we can still go up, add the current offset and recurse upwards
elem.offsetLeft + pageX(elem.offsetParent) :
//otherwise, just get the current offset
elem.offsetLeft;
}
//find the y (vertical, top) position of an element
function pageY(elem) {
//see if we're at the root element, or not
return elem.offsetParent ?
//if we can still go up, add the current offset and recurse upwards
