[转]《精通Javascript》笔记：第七章(Javascript与CSS)

《精通Javascript》笔记：第七章(Javascript与CSS)

Published by sansan at 11:41 am under 前端|Front-End

1. 获取CSS属性的函数（缺陷：不兼容其他计量单位）

   function getStyle(elem, name) {
   	if (elem.style[name])
   		return elem.style[name];
   	else if (elem.currentStyle)
   		return elem.currentStyle[name];
   	else if (document.defaultView && document.defaultView.getComputedStyle) {
   		name = name.replace(/([A-Z])/g, ‘-$1′).toLowerCase();
   		var s = document.defaultView.getComputedStyle(elem, ”);
   		return s && s.getPropertyValue(name);
   	} else
   		return null;
   }

2. 创建动态效果有3个至关重要的属性：位置、尺寸和可见性。
3. 获取元素相对于文档的x、y位置的函数

   function pageX(elem) {
   	return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
   }
   function pageY(elem) {
   	return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
   }

4. 获取元素相对于parentNode的x、y位置的函数

   function parentX(elem) {
   	return elem.parentNode == elem.offsetParent ? elem.offsetLeft : pageX(elem) - pageX(elem.parentNode);
   }
   function parentY(elem) {
   	return elem.parentNode == elem.offsetParent ? elem.offsetTop : pageY(elem) - pageY(elem.parentNode);
   }

5. 获取元素CSS位置的函数

   function posX(elem) {
   	return parseInt(getStyle(elem, ‘left’));
   }
   function posY(elem) {
   	return parseInt(getStyle(elem, ‘top‘));
   }

6. 通过“给元素加属性来记录状态”是种不错的方法，如

   elem_other.style.display = 'none';
   elem.$oldDisplay = elem_other;

7. 设置元素的透明度（从0-100）

   function setOpacity(elem, level) {
   	if (elem.filters)
   		elem.style.filters = ‘alpha(opacity=’ + level + ‘)’;
   	else
   		elem.style.opacity = level / 100;
   }

8. 获取文档视口定位的函数

   function scrollX() {
   	var de = document.documentElement;
   	return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
   }
   function scrollY() {
   	var de = document.documentElement;
   	return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
   }

9. 获取视口的高宽的函数

   function windowHeight() {
   	var de = document.documentElement;
   	return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
   }
   function windowWidth() {
   	var de = document.documentElement;
   	return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
   }

10. Aaron Bookman创建的DOM-Drag库 moo.fx scriptaculous