jquery中获取元素真实宽度的深度解析
jquery中的Width获取值的不同,因为盒子模型通常分为两种。我这边给统一分成了两类,为解决电脑端和手机端的兼容性不同,因为box-sizing是css3中的一个属性,ie低版本不支持,为了避免兼容性问题,所以电脑端,统一用content-box,这个也是默认的,各个浏览器都支持的,而手机端设计,统一使用border-box.即电脑端设置或不设置均使用box-sizing:content-box;手机端,显示设置box-sizing:border-box;下面列表获取在不同的显示模式下获取width的值的异同和显示的问题。
css样式:
查看地址:http://www.sjmoban.com/study/jquery/width.html
.box1{width:300px;height: 100px;background-color:red;color:white;}
.box2{width:300px;height: 100px;background-color:red;color:white;padding:10px;}
.box3{width:300px;height: 100px;background-color:red;color:white;padding:10px;border:20px solid yellow;}
box-sizing border-boxbox1,box2,box3 content-boxbox1,box2,box3 width() 300,280,240 300,300,300 innerWidth() 300,300,260 300,320,320 outerWidth() 300,300,300 300,320,360 综上所述:
想获取元素所占的真实体积,需要使用outerWidth()这个函数,如果元素设置了margin,则使用outerWidth(true),即加入了true这个参数,包含了参数。最保险的做法,就是outerWidth(true)
转载请注明:jquery中获取元素真实宽度的深度解析 - 编程知识库
您可能还会对这些文章感兴趣
2016-12-20 1,786次只会用jQuery前端到底low不low?
如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下,因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么,我是考了成考的北京航空航天大学,也马上快毕业了。不过我觉得这件事不足为提,因为国...
2016-12-17 721次jquery的$().each,$.each的区别
在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点。 $().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来...
2016-12-15 1,853次jquery加载外部文件(.txt .html)显示在网页上
在web开发中常常需要用到jquery去动态的加载文件显示在网页上面,下面是实现的小方法,希望给大家一点提示,达到抛砖引玉的作用哦!!! 效果图: 要加载显示的文件: 网页加载效果: html代码截图: jquery代码截图: 转载请注明:jquery加载外部文件(.txt ....
2016-12-15 665次javascript实现网页倒计时
web开发中常常需要使用到网页倒计时功能,下面是实现方法: 效果图: 代码截图: 转载请注明:javascript实现网页倒计时 - 编程知识库
大家正在看
- linux 系统中Mysql 进程占用cpu过高的解决
- 二类电商是什么意思? 二类电商有哪些?暴利二类电商还好做吗?
- 【二类电商广点通投放指南】二类电商广点通投放值不值
- 密码保护:支付宝突破微信封锁唤起支付宝代码
- Host is not allowed to connect to this MySQL server解决方法
- 密码保护:移动端js自动复制代码
- linux数据库调优,WordPress MySQL占用cpu高数据库优化
- 2017 年十大网页设计趋势
- 网页端的VR实现离我们还远么?
- 最完整的Chrome浏览器客户端调试大全
- iPhone用户人均每天遭电话骚扰1次
- 3G电子化销售服务系统
- Java WeakReference的理解与使用
- 搞清楚 Python traceback