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效率调优经验
Jun 04 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
再论Javascript的类继承
Mar 05 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
ionic实现底部分享功能
May 11 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 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获取http请求的头信息实现步骤
2012/12/16 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
python 写的一个爬虫程序源码
2016/02/28 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
挪威手表购物网站:Klokker
2016/09/19 全球购物
一个C/C++编程面试题
2013/11/10 面试题
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
新闻专业应届生求职信
2013/10/31 职场文书
财政局长个人总结
2015/03/04 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
民事上诉状范文
2015/05/22 职场文书
毕业设计工作总结
2015/08/14 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
Ajax实现三级联动效果
2021/10/05 Javascript