使用jquery的.width()方法获取一个元素的当前宽度，不管元素是否设置了宽度，css样式时内联 外联或者是内嵌，都可以使用

这个方法获取元素的宽度。

使用原生js style.width .width取不到值

1 元素没有设置宽度值

2 元素设置了宽度指，但是是内联或者外联样式表中，并非内嵌式的

这种方法虽然取不到宽高值，但是可以通过这个方式来设置值

可以通过offsetWidth offsetHeight来获取元素的宽高值

所以，jquery的width()与js的offsetWidth都可以获取元素的宽度，但有个区别：

.width()的值单纯是内容区域的宽度、不包括内外补丁和border。ie6+和chrome相同。
offsetWidth ：包括了内补丁和border，不包括外补丁。ie6+和chrome相同

js的style.width取不到元素的宽度值的更多相关文章

  1. js的 style.width 取不到元素的宽度值

    以前一直用jquery的.width()方法来获取一个元素的当前的宽度.不管该元素是否设置了宽度,CSS样式是内联.外联or内嵌,都可用此方式获得元素当前的宽度. 今天想用原生JS想获取一个元素宽度时 ...

  2. JS获取display为none的隐藏元素的宽度和高度的解决方案

    有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案 <h ...

  3. canvas里设置width和css里设置width和js里设置width的区别

    canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...

  4. style.width与offsetWidth的区别

    1. style.width只能读取内联样式,offsetWidth都可以读取: 2. style.width读取的值带“px”单位,offsetWidth读取纯数值: 3. style.width获 ...

  5. 一个元素的宽度 及带padding，border，margin的各自情况

    width() - 设置或返回元素的宽度 height() - 设置或返回元素的高度 innerWidth() - 返回元素的宽度(包含 padding) innerHeight() - 返回元素的高 ...

  6. js null表示没有取到html中的元素 undenfind 表示没有被赋值

    js null表示没有取到html中的元素 undenfind 表示没有被赋值

  7. js 元素高度宽度整理

    1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和clie ...

  8. 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理

    今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...

  9. js中style的属性

    下面这些属性都是通过js的style来设置css.只是整理了一部分,详细的可以参考相应的学习网站,不好的地方欢迎大家拍砖. alignContent :"" 属性在弹性容器内的各项 ...

随机推荐

  1. re正则match、search、findall、finditer函数方法使用

    match 匹配string 开头,成功返回Match object, 失败返回None,只匹配一个. search 在string中进行搜索,成功返回Match object, 失败返回None, ...

  2. postgres —— 窗口函数入门

    注:测试数据在 postgres —— 分组集与部分聚集 中 聚集将多行转变成较少.聚集的行.而窗口则不同,它把当前行与分组中的所有行对比,并且返回的行数没有变化. 组合当前行与 production ...

  3. POJ - 2482：Stars in Your Window （扫描线 ）

    题意:二维平面上给你N颗星,给出星星的坐标,亮度: 然后给你一个W*H的窗口,问你最大的亮度和. 思路:扫描线,假设有一个inf*H的窗口,按照y排序,那么就把H范围内的星星放入了这个窗口(单调队列实 ...

  4. ubuntu18.04 + python3 安装pip3

    最近在学习python 网络爬虫,正好接触到python的requests模块 我的开发环境是ubuntu18.04+python3,这个系统是默认自带了python3,且版本是python 3.6. ...

  5. EF实体类指定部分属性不映射数据库标记

    命名空间 ;using System.ComponentModel.DataAnnotations.Schema; 实体部分 public partial class Student { [NotMa ...

  6. 思科ASA对象组NAT

    ACL对象组NAT配置 ciscoasa#conf t ciscoasa(config)#hostname ASA ASA(config)#domain-name asa.com ASA(config ...

  7. Binding a Xamarin.Forms WebView to ReactiveUI View Model using Custom Type Converters

    引用:https://jamilgeor.com/binding-a-xamarin-forms-webview-to-reactiveui-view-model-using-custom-type- ...

  8. 解决IE报错：Locale 'chinese' is not well-formed，或RangeError: 区域设置“chinese”的格式不正确的问题

    接之前的此博客问题处理:js处理时间时区问题 由于 toLocaleString():据本地时间格式,把 Date 对象转换为字符串.总是会带有上午/下午,所以我加了参数:new Date('2019 ...

  9. linux(deepin) 下隐藏firefox标题栏

    1. 右上角菜单 -> 定制 -> 左下角 "标题栏" 取消打钩 2. 如果上面无法解决,在firefox的启动前插入一个环境变量,具体修改 /usr/share/ap ...

  10. C Primer Plus--位操作

    位字段 bit field 位字段是一个signed int或者unsigned int中一组相邻的位.位字段由一个结构声明建立,该结构声明为每个字段提供标签,并决定字段的宽度. struct p { ...