/*width:只能计算元素的内容宽度
* innerWidth():可以获取元素的 内容+padding 的宽度
* outerWidth():可以获取元素的 内容+padding+border 的宽度
* outerWidth(true):可以获取元素的 内容+padding+border+margin 的宽度
*/
/*例子*/
/*计算产品块标签页导航条的宽度:获取所以导航项,将其宽度累加*/
var proTabs = $(".wjs_product .nav-tabs");
var allProTabsLi = proTabs.find("li");
var total = 0;
allProTabsLi.each(function(index,value){
/*width:只能计算元素的内容宽度
* innerWidth():可以获取元素的 内容+padding 的宽度
* outerWidth():可以获取元素的 内容+padding+border 的宽度
* outerWidth(true):可以获取元素的 内容+padding+border+margin 的宽度*/
total += $(value).innerWidth();
});
proTabs.width(total);
/*使用iScroll实现子元素的滑动*/
var myScroll = new IScroll(".wjs_tabParent",{
scrollX: true, scrollY: false
});

JQuery--计算元素的宽度的更多相关文章

  1. 使用jQuery获取元素的宽度或高度的几种情况

    今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...

  2. JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度

    Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...

  3. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  4. jquery 获取元素的 实际宽度和高度

    jquery outerHeight方法 outerWidth方法 转: http://www.cnblogs.com/zhja/archive/2012/11/07/2758665.html jqu ...

  5. JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别

    整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...

  6. jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现

    jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pr ...

  7. jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度

    曾经写代码中,每当须要获取元素的实际"宽度"(这里的宽度是指元素宽度加上其边距)时,都须要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方 ...

  8. 关于jquery计算页面元素数量

    这段jquery计算页面元素数量代码,能不能刷新页面直接输出数量,而不用点计算按钮 <scriptsrc="http://ajax.googleapis.com/ajax/libs/j ...

  9. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  10. css清浮动与动态计算元素宽度

    css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...

随机推荐

  1. HTML5 上传图片预览

    html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后   有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...

  2. [JZOJ3167] 【GDOI2013模拟3】查税

    题目 描述 题目大意 维护一个有一次函数组成的序列 具体来说,对于位置xxx,现在的值为sx+zx∗(T−tx)s_x+z_x*(T-t_x)sx​+zx​∗(T−tx​) 有两个操作,修改某个位置上 ...

  3. 有关阿里云对SaaS行业的思考,看这一篇就够了

    过去二十年,随着改革开放的深化,以及中国的人口红利等因素,中国诞生了大批To C的高市值互联网巨头,2C的领域高速发展,而2B领域一直不温不火.近两年来,在C端流量饱和,B端数字化转型来临的背景下,中 ...

  4. E. Present for Vitalik the Philatelist 反演+容斥

    题意:给n个数\(a_i\),求选一个数x和一个集合S不重合,gcd(S)!=1,gcd(S,x)==1的方案数. 题解:\(ans=\sum_{i=2}^nf_ig_i\),\(f_i\)是数组中和 ...

  5. day 45 前端CSS

      前端CSS   CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...

  6. requirements.txt 作用

    requirements.txt的作用 用于记录所有依赖包及其精确的版本号.以便新环境部署. 使用pip生成 pip freeze >requirements.txt 当需要创建这个虚拟环境的完 ...

  7. pycharm优化

    一.版本选择 建议安装5.0版本,因为好注册,这个你懂得. 下载地址: https://confluence.jetbrains.com/display/PYH/Previous+PyCharm+Re ...

  8. RQNOJ--160 竞赛真理(01背包)

    题目http://www.rqnoj.cn/problem/160 分析:这是一个01背包问题,对于每一道题目,都有两个选择"做"或者"不做". 但是唯一不同的 ...

  9. vue @click传字符串

    参考: https://www.cnblogs.com/springlight/p/5782637.html 关键:使用转译字符 \ 来转译引号 方法一. 直接传递: var tem = " ...

  10. mongodb什么时候使用

    转自:https://blog.csdn.net/justlpf/article/details/80392944 简介 MongoDB[1] 是一个基于分布式文件存储的数据库.由C 语言编写.旨在为 ...