/*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. nginx 配置文件备份 nginx.conf and vhosts

    bogon:vhosts xingchong$ brew services restart nginx Stopping `nginx`... (might take a while) ==> ...

  2. 基本包装类型Boolean、Number、String特性及常用方法

    基本包装类型:Boolean.Number.String 一.String 字符串常用方法 1.indexOf()  lastIndexOf()  返回相应字符的索引号 2.slice(index1, ...

  3. 算法系列:Shell 排序

    Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...

  4. Clover config.plist Boot部分

    <key>Boot</key> <dict> <key>Arguments</key> < nv_disable= kext-dev- ...

  5. 廖雪峰Java11多线程编程-3高级concurrent包-9Fork_Join

    线程池可以高效执行大量小任务: Fork/Join线程池可以执行一种特殊的任务: 把一个大任务拆成多个小任务并行执行 Fork/Join是在JDK 1.7引入的 示例:计算一个大数组的和 Fork/J ...

  6. Python-函数基础(2)

    目录 可变长参数 形参 实参 函数对象 函数嵌套 名称空间与作用域 名称空间 内置名称空间 局部名称空间 全局名称空间 执行顺序 搜索顺序 作用域 全局作用域 局部作用域 global nonloca ...

  7. 2-sat——poj3678经典建图

    比较经典的建图,详见进阶指南 2-sat一般要用到tarjan来求强连通分量 /*2-sat要加的是具有强制关系的边*/ #include<iostream> #include<cs ...

  8. linux系统添加定时任务

    http://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/crontab.html

  9. Android基础控件ProgressBar进度条的使用

    1.简介 ProgressBar继承与View类,直接子类有AbsSeekBar和ContentLoadingProgressBar, 其中AbsSeekBar的子类有SeekBar和RatingBa ...

  10. CCPC-Wannafly Summer Camp 2019 全记录

    // 7.19-7.29 东北大学秦皇岛校区十天训练营,题目都挂在了Vjudge上.训练期间比较忙,没空更博总结,回来继续补题消化. Day1 这天授课主题是简单图论,节奏挺好,wls两小时理完图论里 ...