javascript与css交互的一些函数
js应该分成三大块:a:核心的js，比如对象，数组，函数，继承，闭包，正则，这些概念与知识
b:与浏览器交互部分，如操作DOM,事件，操作CSS,以及检测浏览器的一些对象方法（包括cookie)
c:ajax与服务器交互，主要与服务端的交互
1.获取真实的css样式
function getStyle(elem,name){ //如果属性存在于style[]中，那么它已被设置了，并且是当前的 //elem.style不能获取在CSS标签或者外置样式文件中样式设置（注意CSS的优先级，行内 > 内部 > 外部 > 浏览器默认） if(elem.style) return elem.style; //否则，使用IE的方法,可以获取样式表中的css属性 else if(elem.currentStyle) return elem.currentStyle +' 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(/()/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 = prop;}function resetCSS(elem,prop){var old = {};for(var i in prop){old = elem.style;elem.style = prop;}return old;}function getHeight(elem){return parseInt(getStyle(elem,'height'));}function getStyle(elem,name){if(elem.style)return elem.style;else if (elem.currentStyle)return elem.currentStyle;else if (document.defaultView && document.defaultView.getComputedStyle ){name = name.replace(/()/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.拖放库
页:
[1]