如何取得未设置宽度的页面元素的实际宽度

huangbinlq 2010-04-20 01:21:59

用getelementbyid("id').style.width只能取已经设置了宽度的元素的宽度，但如果该元素的宽度并没有明确设置时，取得的宽度值为0，那么如何取得页面元素在显示后的实际宽度呢？

...全文

74 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

mykelly6 2010-04-21

打赏
举报

我记得jQuery是可以获取的，不过按说应该是同样的原理。
$("#id").width();

huangbinlq 2010-04-21

打赏
举报

[Quote=引用 2 楼 lieri111 的回复:]
JScript code

getElementbyid("id').offsetWidth

一般情况下可以
[/Quote]

如何才能在任何情况下都可以呢？

passself 2010-04-20

打赏
举报



getElementbyid("id').offsetWidth

一般情况下可以

囧 2010-04-20

打赏
举报

如果元素是显示的，可以用getelementbyid("id').offsetWidth

（题外话：从本次开始我新增了jQuery EasyUI的专题页面大家可以关注我的专题页来及时获取最新的EasyUI资源专题页地址如下http:http://download.csdn.net/album/detail/343 同时也希望转载的那些朋友能保留我资源的说明及出处地址我花那么多精力制作出来的你们鼠标点两下就给我转走了还不注明出处实在是不厚道本来就是本着分享精神的为的就是聚集一点人气和提供一个优良的环境来一起学习进步的请不要抹杀掉我的热情谢谢）　　时隔4个月之久 EasyUI终于迎来大版本更新了本次更新内容诸多除了常规维护外还新增了3个新组件都很实用详细的可以阅读更新说明里面给了详细的解读另外从该版本开始我将会逐步的将EasyUI官方以及第三方较好的插件API整合到API文档当中并且会对这些插件做一些简单的Demo实现存放到配套提供的程序包demo文件夹下以便大家学习和使用本期文档中将官方提供的所有附加插件的API都整理并存放到Extension节点下了这些扩展的demo在附带的程序包中已经提供可以用于参考使用 jQuery EasyUI 1 4版本更新内容： Bug（修复） menu：修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题； datagrid：修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement（改进） EasyUI的所有组件已经支持非固定百分比大小的尺寸设置； menu：添加“showItem” “hideItem”和“resize”方法； menu：基于窗体大小自动调整高度； menu：添加“duration”属性该属性允许用户自定义隐藏菜单动画的持续时间以毫秒为单位； validatebox：添加“onBeforeValidate”和“onValidate”事件； combo：从该版本开始combo组件扩展自textbox组件（textbox是1 4中新增的组件）； combo：添加“panelMinWidth” “panelMaxWidth” “panelMinHeight”和“panelMaxHeight”属性； searchbox：从该版本开始searchbox组件扩展自textbox组件（textbox是1 4中新增的组件）； tree：添加“getRoot”方法用于返回通过“nodeEl”参数指定的节点的顶部父节点元素注意：官网的英文API中该函数的说明有误其说明是none 无参数实际这里是需要参数的； tree：添加“queryParams”属性； datetimebox：添加“spinnerWidth”属性； panel：添加“doLayout”方法用于控制面板内组件的大小； panel：添加“clear”方法用于清除面板内的内容； datagrid：允许用户设置百分比宽度的列（该功能真是千呼万唤始出来啊）； form：添加“ajax” “novalidate”和“queryParams”属性； linkbutton：添加“resize”方法 New Plugin（新组件） textbox：该组件是一个增强的输入字段它可以让用户非常简单的构建一个表单； datetimespinner：该组件是一个日期和时间的微调组件它允许我们选择一个特定的日期或时间； filebox：filebox 该组件表单元素中用于上传文件的文件框工具组件 ">（题外话：从本次开始我新增了jQuery EasyUI的专题页面大家可以关注我的专题页来及时获取

jquery的width()方法获取到的宽度是不包含元素的padding值、margin值、以及border值的元素在实际宽度需要采用其他方法来获取如下：outerWidth()函数用于设置或返回当前匹配元素的外宽度。外宽度默认包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。如下...

PowerBI系列之基础和可视化技能专题基础概念PowerBI是什么PowerBI优秀作品展示PowerBI组件简介 PowerBI Desktop的下载安装PowerBI Desktop界面介绍和5分钟入门 PowerBI账号区别PowerBI对象和结构PowerBI和Tableau等其他主流BI产品的介绍 PowerBI官方文档基本操作文件和报表设置选项介绍页面属性设置-大小、背景、壁纸、对齐、筛选器窗格格式页面视图-适应页面、宽度、实际大小视觉对象格式属性面板快速调整页面布局和样式 (文本笔记)视觉对象分组、显示或隐藏使用数据对象表和数据点表向报表添加文本框和形状可视化技能使用编辑交互功能来控制图表联动多层联动中控制使用Control Click切片器的使用同步切片器折叠切片器给切片器设定默认值给切片器设定动态默认值（DAX函数-默认当前月或天）使切片器默认代表无任何选择切片器仅显示有对应数据的选项使切片器反向筛选和计算切片器之间取数据并集关系中多端的切片器筛选一端的切片器参数的创建和参数切片器的使用筛选器书签和选择窗格下拉式多级菜单页面导航菜单报表主页设计和重置切片器普通和自定义以及视觉对象标头工具提示按列排序和自定义排序分组装箱普通钻取和层次钻取及跨页钻取保留所有筛选器和设置钻取按钮跨报表钻取Matrix 矩阵详解矩阵中为每个列快速设置相同列宽矩阵中动态显示列的两种方法使用Web超链接和图片超链接文本框设置超链接或邮件地址手机端页面布局创建参数和使用报表模块（输入或值列表）利用报表模板和参数控制线下报表数据权限利用参数实现数据手工加密和权限控制利用页面导航控制页面级权限报表主题控制和主题模板生成器PBIX和PBIT文件结构解析：提取图片和主题，提取已下架的自定义图表，报表元数据等 PBIDS预定义数据连接文件DAX函数使可视化强大 DAX函数实现特殊符号的使用 DAX函数实现切片器默认当前月或天 DAX函数使切片器默认代表无任何选择 DAX函数使切片器仅显示有数据的选项 DAX函数使切片器反向筛选和计算 DAX函数使切片器之间取并集 DAX函数使关系中多端的切片器筛选一端的切片器DAX函数实现年月共同决定数据排序DAX函数实现动态图表标题DAX函数实现动态图表配色和图标DAX函数实现动态纵坐标DAX函数实现动态横坐标

写页面的时候如果页面元素的宽度超出设备宽度就会出现横向滚动条，这对移动端的页面影响还是很大的，那么怎么去检测到底是那些元素的宽度超出了设备的宽度了呢？先看看是哪些原因导致这种现象：宽度使用了width:100%，但是又有padding或者border，由于浏览器默认的盒模型是content-box，也就是说width:100%是内容的100%，这样再加上padding和border才是元素实际的宽

原标题：div宽度设置width:100%后再设置padding或margin超出父元素的解决办法前言本文介绍的是利用CSS3的新属性box-sizing，解决div宽度设置width:100%后再设置padding或margin超出父元素的问题，有需要的朋友们可以参考借鉴。语法box-sizing: content-box|border-box|inherit;值一、content-box这是由...

JavaScript

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章