javascript与CSS复习(《精通javascript》)


Posted in Javascript onJune 29, 2010

如: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 

 elem.offsetTop + pageY(elem.offsetParent) : 
//otherwise, just get the current offset 
elem.offsetTop; 
}

我们接着要获得元素相对于它父亲的水平和垂直位置,使用元素相对于父亲的位置,就可以为DOM增加额外的元素,并相对定位于它的父亲。
//find the horizontal position of an element within its parent 
function parentX(elem) { 
//if the offsetParent is the element's parent, break early 

return elem.parentNode == elem.offsetParent ? 
elem.offsetLeft : 
// otherwise, we need to find the position relative to the entire 
// page for both elements, and find the difference 
pageX(elem) - pageX(elem.parentNode); 
} 
//find the vertical positioning of an element within its parent 
function parentY(elem) { 

//if the offsetParent is the element's parent, break early 
return elem.parentNode == elem.offsetParent ? 


elem.offsetTop : 
// otherwise, we need to find the position relative to the entire 
// page for both elements, and find the difference 
pageY(elem) - pageY(elem.parentNode); 
}

元素位置的最后一个问题,获取元素当对于css定位(非static)容器的位置,有了getStyle这个问题很好解决
//find the left position of an element 
function posX(elem) { 
//get the computed style and get the number out of the value 
return parseInt(getStyle(elem, 'left')); 
} 
//find the top position of an element 
function posY(elem) { 

//get the computed style and get the number out of the value 
return parseInt(getStyle(elem, 'top')); 
}

接着是设置元素的位置,这个很简单。
//a function for setting the horizontal position of an element 
function setX(elem, pos) { 
//set the 'left' css property, using pixel units 

elem.style.left = pos + 'px'; 
} 
//a function for setting the vertical position of an element 
function setY(elem, pos) { 

//set the 'top' css property, using pixel units 

elem.style.top = pos + 'px'; 
}

再来两个函数,用于调准元素的当前位置,在动画效果中很实用
//a function for adding a number of pixels to the horizontal 
//position of an element 
function addX(elem, pos) { 
//get the current horz. position and add the offset to it 
setX(elem, posX(elem) + pos); 
} 
//a function that can be used to add a number of pixels to the 
//vertical position of an element 
function addY(elem, pos) { 

//get the current vertical position and add the offset to it 
setY(elem, posY(elem) + pos); 
}

知道如何获取元素位置之后,我们再来看看如何获取元素的尺寸,
获取元素当前的高度和宽度
function getHeight(elem) { 
return parseInt(getStyle(elem, 'height')); 
} 
function getWidth(elem) { 

return parseInt(getStyle(elem, 'width')); 
}

大多数情况下,以上的方法够用了,但是在一些动画交互中会出现问题。比如以0像素开始的动画,你需要事先知道元素究竟能有多高或多宽,其二当元素的display属性为none时,你会得不到值。这两个问题都会在执行动画的时候发生。为此作者给出了获得元素潜在高度和宽度的函数。
//查找元素完整的、可能的高度 
function fullHeight(elem) { 
//如果元素是显示的,那么使用offsetHeight就能得到高度,如果没有offsetHeight,则使用getHeight() 

if(getStyle(elem, 'display') != 'none') 



return elem.offsetHeight || getHeight(elem); 
//否则,我们必须处理display为none的元素,所以重置它的css属性以获得更精确的读数 
var old = resetCSS(elem, { 

display:'', 
visibility:'hidden', 
position:'absolute' 
}); 
//使用clientHeigh找出元素的完整高度,如果还不生效,则使用getHeight函数 
var h = elem.clientHeight || getHeight(elem); 
//最后,恢复其css的原有属性 
restoreCSS(elem, old); 
//并返回元素的完整高度 
return h; 
} 
//查找元素完整的、可能的宽度 
function fullWidth(elem) { 

//如果元素是显示的,那么使用offsetWidth就能得到宽度,如果没有offsetWidth,则使用getWidth() 
if(getStyle(elem, 'display') != 'none') 


return elem.offsetWidth || getWidth(elem); 
//否则,我们必须处理display为none的元素,所以重置它的css以获取更精确的读数 
var old = resetCSS(elem, { 

 display:'', 
visibility:'hidden', 
position:'absolute' 
}); 
//使用clientWidth找出元素的完整高度,如果还不生效,则使用getWidth函数 
var w = elem.clientWidth || getWidth(elem); 
//最后,恢复原有CSS 
 restoreCSS(elem, old); 
//返回元素的完整宽度 
return w; 
} 
//设置一组CSS属性的函数 
function resetCSS(elem, prop) { 

var old = {}; 
//遍历每个属性 
for(var i in prop) { 

//记录旧的属性值 
old[i] = elem.style[i]; 


//设置新的值 


elem.style[i] = prop[i]; 
} 
return old; 
} 
//恢复原有CSS属性 
function restoreCSS(elem, prop) { 

for(var i in prop) 


elem.style[i] = prop[i]; 
}

还有不少内容,明天继续,写写效率低下了,笔记本屏幕太小,开个pdf,写着文章老来回切换,真是。。。是时候弄个双显了!
Javascript 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 #Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 #Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 #Javascript
javascript hasFocus使用实例
Jun 29 #Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 #Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 #Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 #Javascript
You might like
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
浅谈js闭包理解
2019/03/28 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
详解Python pygame安装过程笔记
2017/06/05 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
微观物理专业自荐信
2014/01/26 职场文书
总经理岗位职责描述
2014/02/08 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
故意杀人罪辩护词
2015/05/21 职场文书