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 相关文章推荐
在js中单选框和复选框获取值的方式
Nov 06 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
理解javascript闭包
Dec 15 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
松下Panasonic RF-B65电路分析
2021/03/02 无线电
坏狼php学习 计数器实例代码
2008/06/15 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
Node.js文件操作详解
2014/08/16 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
JavaScript SHA512&SHA256加密算法详解
2015/08/11 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
如何用RxJS实现Redux Form
2018/12/29 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
Python线程详解
2015/06/24 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
在python中用url_for构造URL的方法
2019/07/25 Python
500行python代码实现飞机大战
2020/04/24 Python
Python os库常用操作代码汇总
2020/11/03 Python
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
影视广告专业求职信
2014/09/02 职场文书
优秀教师推荐材料
2014/12/16 职场文书
公务员政审材料
2014/12/23 职场文书
客房领班岗位职责
2015/02/11 职场文书
商业计划书格式、范文
2019/03/21 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
新手入门Mysql--sql执行过程
2021/06/20 MySQL