使用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. 卓越Code第一次作业

    第一次团队作业 序言 所属课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign 作业要求 https://w ...

  2. 树莓派上 Docker 的安装和使用

    Docker 是一个开源的应用容器引擎,可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不 ...

  3. python内置模块笔记(持续更新)

    常用函数name = '{wh}my \t name is {name},age is {age}.' print(name.capitalize()) # 字符串的开头字母大写 print(name ...

  4. django 进行语言的国际化及在后台进行中英文切换

    项目的部署地为: 中国大陆与美国东海岸, 两个地区的服务器数据不进行同步, 中国地区的服务器页面展示中文, 美国地区的服务器页面展示成英文, 项目后台使用python编程语言进行开发, 并结合djan ...

  5. SSH——ssh_exchange_identification: read: Connection reset by peer

    前言 ssh远程连接出错 步骤 查看ssh的详细信息 [root@pre-nginx02 ~]# ssh -v 192.168.1.164 OpenSSH_6.6.1, OpenSSL 1.0.1e- ...

  6. EntityFramework6 学习笔记（三）

    你可能要问,我用EF不就为了避免写SQL吗?如果要写SQL我不如直接用ADO.NET得了.话虽然这么说没错,可有些时候使用EF操作数据还是有一些不方便,例如让你根据条件删除一组记录,如果按照正常的流程 ...

  7. 趣味编程：FizzBuzz（Haskell版）

    g :: Int -> Int -> Int -> String g n 0 0 = "FizzBuzz" g n 0 _ = "Fizz" ...

  8. 了解一下Elasticsearch的基本概念

    一.前文介绍 Elasticsearch(简称ES)是一个基于Apache Lucene(TM)的开源搜索引擎,无论在开源还是专有领域,Lucene 可以被认为是迄今为止最先进.性能最好的.功能最全的 ...

  9. LeetCode 732. My Calendar III

    原题链接在这里:https://leetcode.com/problems/my-calendar-iii/ 题目: Implement a MyCalendarThree class to stor ...

  10. 悲伤的 C++ throw(…)

    当在C++语言中引入异常时,引入了相应的throw(…)动态异常说明符,注释了哪些异常可以由函数抛出.比如: // this function might throw an integer or a ...