使用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. python的gui库tkinter

    导入tkinter模块 import tkinter as tk 设置窗口名字和大小 frame=tk.Tk() frame.title('数学') frame.geometry('200x440') ...

  2. Linux/Raspbian 每个目录用途说明

    本文转自无聊小博,很多刚接触树莓派/Linux 的同学会在给树莓派安装.卸载.配置软件时,软件和配置文件等存放在哪儿产生疑惑.也会遇到诸如“磁盘分区”.U盘挂载等涉及到的目录路径问题.Linux 的目 ...

  3. 通过vue-cli搭建vue项目

    一.搭建环境 安装node.js 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下 ...

  4. ElementUI——报错汇总

    前言 elementUI的报错汇总 错误 please transfer a valid prop path to form item! vue.esm.js?c5de:628 [Vue warn]: ...

  5. The 10th Shandong Provincial Collegiate Programming Contest 2019山东省赛游记+解题报告

    比赛结束了几天...这篇博客其实比完就想写了...但是想等补完可做题顺便po上题解... 5.10晚的动车到了济南,没带外套有点凉.酒店还不错. 5.11早上去报道,济南大学好大啊...感觉走了一个世 ...

  6. 分析第一个Android程序

    项目结构切换Project, 项目真实目录结构 { 1.    .gradle和idea 两个目录放置的都是Android Studio 自动生成的一些文件,我们无需关心,也不要去手动编辑. 2.AP ...

  7. 【BZOJ4237】 稻草人 CDQ分治+单调栈

    ## 题目描述 JOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,JOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田地.和启示中的一样,田地需要满足以下 ...

  8. codeforces1276A As Simple as One and Two

    C.As Simple as One and Two A. As Simple as One and Two time limit per test 3 seconds memory limit pe ...

  9. 为啥用DTO

    0.部分参数对于开发前端的人来说是无意义的,因为传递也没有效果.所以不应该暴露给前端使用. 1.依据现有的类代码,即可方便的构造出DTO对象,而无需重新进行分析. 2.减少请求次数,大大提高效率. 3 ...

  10. Mysql 多表连接查询 inner join 和 outer join 的使用

    JOIN的含义就如英文单词“join”一样,连接两张表,大致分为内连接,外连接,右连接,左连接,自然连接.这里描述先甩出一张用烂了的图,然后插入测试数据. 首先先列举本篇用到的分类(内连接,外连接,交 ...