javascript与CSS复习(《精通javascript》)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript与CSS复习(《精通javascript》),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含6946字,纯文字阅读大概需要10分钟。
内容图文
![javascript与CSS复习(《精通javascript》)](/upload/InfoBanner/zyjiaocheng/371/a79ef2067ce54d4e9166bc1744e60e7e.jpg)
代码如下:
//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与CSS复习(《精通javascript》)全部内容,希望文章能够帮你解决javascript与CSS复习(《精通javascript》)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。