为了账号安全,请及时绑定邮箱和手机立即绑定

javascript中元素大小的确定

标签:
JavaScript
偏移量

offset dimension包括元素在屏幕上占用的所见空间的大小.元素的可见大小由宽高,内边距,滚动条和边框确定,注意:不包含外边距.

如图所示:

offset-dimension

offsetLeftoffsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中。offsetParent属性不一定与parentNode的值相等。例如,<td>元素的offsetParent是作为其祖先元素的<table>元素,因为<table>是在DOM层次中距<td>最近的一个具有大小的元素。

要想取得某个元素在页面上的偏移量,就可以将这个元素的offsetLeftoffsetParent.offsetLeft相加,如此循环直到根元素就可以得到一个基本准确的值:

function getElementLeft(element) {
  var actualLeft = element.offsetLeft;
  var current = element.offsetParent;
  while (current !== null) {
      actualLeft += current.offsetLeft;
      current = current.offsetParent;
  }
  return actualLeft;
}
客户区大小

client dimension,指的是元素内容及其内边距所占据的空间大小.它有2个属性clientWidthclientHeight.如下所示:

client-dimension

从字面意思来讲:客户区大小就是元素内部的空间大小,因此滚动条占用的空间不计算在内.最常用的情况是确定浏览器视口大小.

function getViewport() {
    // IE 7之前的混杂模式,现代浏览器一般支持的是标准模式
  if (document.compatMode == "BackCompat") {
    return {
      width: document.body.clientWidth,
      height: document.body.clientHeight
    };
  } else {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    };
  }
}
滚动大小

scroll dimension,包含滚动内容的元素的大小.有些元素(例如<html>元素)即使在没有执行任何代码的时候也能自动添加滚动条;另外一些元素,则需要通过CSS的overflow属性进行设置才能滚动.

  • scrollHeight:在没有滚动条的情况下,元素内容的总高度
  • scrollWidth:在没有滚动条的情况下,元素内容总宽度
  • scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
  • scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置

scroll-dimension

由于浏览器的兼容性,在取得页面的总高度时必须取得scrollHeightclientHeight中的最大值才能保证精确的结果,举个栗子:

var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);

注意:以上的代码在IE混杂模式下用document.body代替document.documentElement

通过document.body.scrollTop属性我们可以实现*回到顶部*效果,将其值设置为0即可.

总结:
- 每个元素都有关联一个style对象,用来确定和修改行内样式.
- 要确定某个元素的计算样式(非内联样式),可以使用getComputedStyle()方法,对于IE可以使用currentStyle属性
- 可以通过document.styleSheets集合获取样式表.

点击查看更多内容
10人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消