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 相关文章推荐
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
javascript常用的设计模式
Feb 09 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
原生js实现碰撞检测
Mar 12 Javascript
js在HTML的三种引用方式详解
Aug 29 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在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
php 判断数组是几维数组
2013/03/20 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
详解js的六大数据类型
2016/12/27 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
详解Python中DOM方法的动态性
2015/04/11 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
老师推荐信
2013/10/28 职场文书
餐饮投资计划书
2014/04/25 职场文书
博士生求职信
2014/07/06 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS