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

今天想用原生JS想获取一个元素宽度时,写document.getElementById("id").style.width或者document.getElementById("id").width都取不到值。。。

总结了一下。在以下情况下,js原生.style.width或者.width取不到值

1.元素未设置宽度值。

2.元素设置了宽度值,但,设置在内联或外联样式表中,而非内嵌式的。比如
    
css代码

    p{
background:pink;
}

html代码

    <p id="p1">aaaaaaaaaa</p>

PS:虽然这种方式取不到宽度值。但却可以设置元素的宽度值。比如:设置p元素宽度为200px:

    document.getElementById("p1").style.width ="200px";

综上,所以,只有将元素的样式设置成内嵌式的,才可以通过 document.getElementById("id").style.width 来获取宽度值;
比如:

<p id="p1" style="width:144px;">dddddddddd</p>

执行js代码

var w = document.getElementById("p1").style.width;
alert(w);

执行后输出结果为144px

那么,对于没有设置宽度的元素、亦或CSS样式非内嵌式的,js原生写法可以通过offsetWidht来获取宽度

即:document.getElementById("#p1").offsetWidth;

ps:对于设置了CSS样式的元素(内联、内嵌、外联)offsetWidth 也都可以获得值

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

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

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

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

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

  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. LRU算法---缓存淘汰算法

    计算机中的缓存大小是有限的,如果对所有数据都缓存,肯定是不现实的,所以需要有一种淘汰机制,用于将一些暂时没有用的数据给淘汰掉,以换入新鲜的数据进来,这样可以提高缓存的命中率,减少磁盘访问的次数. LR ...

  2. C++之map使用

    解析文件或者字符串,一key跟keyvalue来存在map中,如下代码: test.h: #include <map>#include <vector> Class test ...

  3. CSS 图片

    CSS 图片 一.圆角图片 img { border-radius: 8px; } 二.缩略图 border 属性来创建缩略图. img { border: 1px solid #ddd; borde ...

  4. 20145327 《Java程序设计》第三周学习总结

    20145327 <Java程序设计>第三周学习总结 教材学习内容总结 对象:存在的具体实体,具有明确的状态和行为. 类:具有相同属性和行为的一组对象的集合,用于组合各个对象所共有操作和属 ...

  5. 20144303 《Java程序设计》课程总结

    20144303 <Java程序设计>课程总结 每周读书笔记链接汇总 第一周:http://www.cnblogs.com/20144303sys/p/5248979.html 第二周:h ...

  6. 20135302魏静静Linux内核分析第二周学习总结

    操作系统是如何工作的 1. 小结:计算机是怎样工作的 三个法宝 存储程序计算机.函数调用堆栈.中断机制 两把宝剑 中断上下文.进程上下文的切换 2. 堆栈 堆栈是C语言程序运行时必须的一个记录调用路径 ...

  7. Jquery4 过滤选择器

    学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似 CSS3里的伪类,可以让不支持 CSS3 ...

  8. node实现rar格式压缩

    背景 由于公司的CMS系统里,只接受rar格式压缩的文件,所以没法直接使用nodejs里提供的zip压缩组件.只能从winRar软件入手了,但网上没有多少这方面相关的东西,所以下面也是自己尝试着在做. ...

  9. Spring中RestTemplate进行Http调用

    Spring中的RestTemplate类源自spring-web,http调用中设置超时时间.设置连接池管理等非常重要,保证了系统的可用性,避免了长时间连接不上或者等待数据返回,拖垮系统. 现贴出工 ...

  10. CentOS7下安装VLC

    用最新的CentOS7发现没有视频播放器,于是在http://pkgs.org/上查找,发现了nux dextop仓库上有,于是到他的官网上http://li.nux.ro/repos.html查了下 ...