您的位置：首页 > Web前端 > JavaScript

JS笔记

2016-05-20 16:27 525 查看

js获取网页高度：

网页可见区域宽： document.body.clientWidth;

网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);

网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWidth;

网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;

网页被卷去的左： document.body.scrollLeft;

网页正文部分上： window.screenTop;

网页正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度： window.screen.availHeight;

屏幕可用工作区宽度：window.screen.availWidth;

1、offsetWidth width+padding+border)

当前对象的宽度。

style.width也是当前对象的宽度(width+padding+border)。

2、offsetHeight :(Height+padding+border)

当前对象的高度。
style.height也是当前对象的高度(height+padding+border)。

3、offsetLeft :
当前对象到其上级层左边的距离。
不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。
style.left当前对象到其上级层左边的距离。

4、offsetTop :
当前对象到其上级层顶部边的距离。
不能对其进行赋值.设置对象到上级层顶部边的距离请用style.top属性。
style.top当前对象到其上级层顶部边的距离。

offsetXXX与style.XXX区别：
1)style.top返回值除了数字外还带有单位px；
2)如对象到其上级层顶部边的距离设定值为百分比，style.top返回此百分比,而offsetTop则返回到其上级顶部边的距离的值；
3)如果没有给 HTML 元素指定过 top样式，则 style.top返回的是空字符串；
4)offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。
5)offsetWidth属性仅是可读属性，而style.width是可读写的。

6)offsetWidth属性返回值是整数，而style.width的返回值是字符串。

7)style.width仅能返回以style方式定义的内部样式表的width属性值。

注意：如果上级层为body，由于IE、FF对padding、margin的解释不一样所以要明确规定处理不是下列的区别就不成立了。

IE
1)如果Div的上级层是body，而div与body之间有个div，如body->div->divo；divo的offsetTop=div的padding+margin+boder；
2）如果Div的上级层是body，如body>divo；divo的offsetTop=div的padding+margin+boder；
这divo的offsetTop=divo的margin >body.padding则为divo的margin，否则为body.padding谁大是谁？

FF 上述两种情况：offsetTop=margin+padding ;
(IE与FF中的body默认padding为10)在IE6.0 FF3.6.13

5、scrollWidth:获取对象的滚动宽度。

6、scrollHeight: 获取对象的滚动高度。

7、scrollLeft:设置或获取位于对象左边界和对象中目前可见内容的最左端之间的距离(width+padding为一体)

8、scrollTop:设置或获取位于对象最顶端和对象中可见内容的最顶端之间的距离；(height+padding为一体)

9、clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框；

10、clientHeight: 获取对象可见内容的高度，不包括滚动条，不包括边框；

11、clientLeft: 获取对象的border宽度

12、clientTop：获取对象的border高度

13、offsetParent :当前对象的上级层对象.

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

以上属性测试的文档类型为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果不写文档类型，浏览器就会按照 HTML 4.0 的方式来处理，则效果可能不同。

JS 获取浏览器窗口大小

?

js取消事件冒泡和阻止事件的默认行为（兼容写法）

功能:停止事件冒泡

function stopBubble(e) {

    // 如果提供了事件对象，则这是一个非IE浏览器

    if ( e && e.stopPropagation ) {

        // 因此它支持W3C的stopPropagation()方法

        e.stopPropagation();

    } else {

        // 否则，我们需要使用IE的方式来取消事件冒泡

        window.event.cancelBubble = true;

    }

}

功能：阻止事件默认行为

function stopDefault( e ) {

    // 阻止默认浏览器动作(W3C)

    if ( e && e.preventDefault ) {

        e.preventDefault();

    } else {
        // IE中阻止函数器默认动作的方式

        window.event.returnValue = false;

    }

    return false;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航