javascript与css交互的一些函数

qgymje

js应该分成三大块:
a:核心的js，比如对象，数组，函数，继承，闭包，正则，这些概念与知识
b:与浏览器交互部分，如操作DOM,事件，操作CSS,以及检测浏览器的一些对象方法（包括cookie)
c:ajax与服务器交互，主要与服务端的交互

1.获取真实的css样式
function getStyle(elem,name){            //如果属性存在于style[]中，那么它已被设置了，并且是当前的            //elem.style不能获取在CSS标签或者外置样式文件中样式设置（注意CSS的优先级，行内 > 内部 > 外部 > 浏览器默认）            if(elem.style[name])                return elem.style[name];                        //否则，使用IE的方法,可以获取样式表中的css属性            else if(elem.currentStyle)                return elem.currentStyle[name] +' i am ie';                        //这是w3c方法，FF中用此方法获取样式表中的css属性            else if(document.defaultView && document.defaultView.getComputedStyle){            //如果用w3c方法，提供的name必须为和css相同的字符串:带有下划线的，因此要转换一下             //可合写成name = name.replace(/(A-Z)/g,"-$1").toLowerCase();                name = name.replace(/([A-Z])/g,"-$1");                name = name.toLowerCase();                var s = document.defaultView.getComputedStyle(elem,'');                //这里是一个小技巧：尝试检索一个undefined值会抛出Type Error异常，可以用 && 来抑制（返回undefined）                return s && s.getPropertyValue(name) + ' i am w3c';            }            else                return null;        }
2.获取元素相对页面的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;        }//用这两个可以得知IE的元素在无任何样式下的left:10px,top:15px//而FF，OPERA是默认是left:8px top:8px

3.获取元素相对于父元素的x,y位置
4.获取元素css位置
5.设置元素的位置
6.设置元素相对于当前位置的距离的位置
7.获取元素的真实高度，宽度
8.获取元素潜在高度，宽度
9.隐藏/显示元素
10.设置元素的透明度
11.滑动

<div id='slideDown' style='width:300px;height:300px;border:1px solid #ccc'></div><button >click</button><script type="text/javascript">function slideDown(id){var elem = document.getElementById(id);elem.style.height = '0px';elem.style.display = 'block';var h = elem.fullHeight(elem);for(var i = 0 ; i < 100 ; i = i + 5){(function(){var pos = i;setTimeout(function(){elem.style.height = (pos / 100 ) * h + 'px';},(pos + 1) * 10);})();}}function fullHeight(elem){if(getStyle(elem,'display') !== 'none')return elem.offsetHeight || getHeight(elem);var old = resetCSS(elem,{display:'',visibility:'hidden',position:'absolute'});var h = elem.clientHeight || getHeight(elem);restoreCSS(elem,old);return h;}function restoreCSS(elem,prop){for(var i in prop)elem.style[i] = prop[i];}function resetCSS(elem,prop){var old = {};for(var i in prop){old[i] = elem.style[i];elem.style[i] = prop[i];}return old;}function getHeight(elem){return parseInt(getStyle(elem,'height'));}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");name = name.toLowerCase();var s = document.defaultView.getComputedStyle(elem,"");return s && s.getPropertyValue(name);}elsereturn null;}</script>

12.渐显
13.得到鼠标位置
14.获取鼠标相对于当前元素的位置
15.获取窗口的文档显示区的高度和宽度，以像素计

function windowHeight(){var de = document.documentElement;//innerHeight IE不支持return self.innerHeight ||(de && de.clientHeight) ||document.body.clientHeight;}function windowWidth(){var de = document.documentElement;return self.innerWidth ||(de && de.clientWidth) ||document.body.clientWidth;}//但我经过测试，在IE5.5/6/7/8，opera10,chrom3,safari4,ff3.5下都能得到数据，或许需要更全面一点的测试。//B.T.W opera10下的widget还是很不错的，自带的开发工具也不错

16.获取文档视口定位
17.移动滚动条
18.获取窗口高度宽度
19.拖放库