美文网首页
获取元素的宽和高

获取元素的宽和高

作者: pengtoxen | 来源:发表于2019-12-05 08:47 被阅读0次

下图显示了CSS框模型:具有内容,填充,边框和边距的块元素:

使用以下方法获取每个框的宽度和高度:

var box =  document。querySelector('div');

//宽度和高度(以像素为单位),包括填充和边框
//对应于jQuery externalWidth(),outsideHeight()
var width = box.offsetWidth;
var height = box.offsetHeight;

//以像素为单位的宽度和高度,包括填充,但没有边框
//对应于jQuery innerWidth(),innerHeight()
var width = box.clientWidth;
var height = box.clientHeight;

元素的边距是根据其计算样式来计算的:

var  style =  window .getComputedStyle?getComputedStyle(el,null):el.currentStyle;

var marginLeft =  parseInt(style.marginLeft)| |  0 ;
var marginRight =  parseInt(style.marginRight)| |  0 ;
var marginTop =  parseInt(style.marginTop)| |  0 ;
var marginBottom =  parseInt(style.marginBottom)| |  0 ;

计算的样式也可以用于读取其他属性。例如边框宽度:

var borderLeft =  parseInt(style.borderLeftWidth)| |  0 ;

获取窗口的宽度和高度的方法有所不同。就像在jQuery中一样,以上介绍的方法不适用于窗口或文档对象。使用此代替:

var w =  window .innerWidth | |  document .documentElement.clientWidth | |  文档 .body.clientWidth;
var h =  window .innerHeight | |  document .documentElement.clientHeight | |  文档 .body.clientHeight;

相关文章

  • 获取元素的宽和高

    下图显示了CSS框模型:具有内容,填充,边框和边距的块元素: 使用以下方法获取每个框的宽度和高度: 元素的边距是根...

  • 2018-09-26

    JQuery03代码笔记 一、元素的创建 二、元素的添加 三、移除的元素 四、设置元素的宽和高 五、获取元素的le...

  • jquery 屏幕事件 onload、onresize、onch

    js 获取屏幕的宽 高 jquery 获取屏幕的宽和高

  • 一些写例子常用的宏

    获取随机的颜色 屏幕的宽和高 打印的宏

  • svg.js知识点简单汇总

    1、获取g元素的宽和高及位置信息,使用.getBBox(),在是svg.js中,使用SVG.find(选择器).b...

  • UITableViewCell 的重用

    import UIKit //获取屏幕的宽和高 let kScreenWidth = UIScreen.main....

  • jQuery尺寸

    1、 width和height:p标签的元素宽和高2、 innerWidth和innerHeight:p标签的元素...

  • javascript 获取高宽和坐标

    坐标 宽高 偏移 视区 滚动 临近父容器 在webkit 中,如果元素为隐藏的(该元素或其祖先元素的 style....

  • iOS 获取image宽和高

    UIImage *image=[UIImage imageNamed:imageNameNormal];CGFlo...

  • JS获取宽高

    JS获取宽高通过JS获取盒模型对应的宽和高,有以下几种方法: 为了方便书写,以下用dom来表示获取的HTML的节点...

网友评论

      本文标题:获取元素的宽和高

      本文链接:https://www.haomeiwen.com/subject/fqorgctx.html