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 相关文章推荐
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
全面理解闭包机制
Jul 11 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 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
将数组写入txt文件 var_export
2009/04/21 PHP
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
用php解析html的实现代码
2011/08/08 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php头像上传预览实例代码
2017/05/02 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python3.6正式版新特性预览
2016/12/15 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
采购求职信
2014/03/17 职场文书
纠纷协议书
2014/04/16 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
2014年转正工作总结
2014/11/08 职场文书
在职证明格式样本
2015/06/15 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang