无涯教程-jQuery - width( )方法函数

jQuerywidth()方法：获取元素宽度的详细教程,

原创

于 2023-08-01 11:00:16 发布 · 588 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

width()方法获取第一个匹配元素的当前计算像素宽度。

width( ) - 语法

selector.width( )

此方法能够找到窗口和文档的宽度，如下所示:

$(window).width();   //返回浏览器窗口的宽度
$(document).width(); //返回 HTML 文档的宽度

width( ) - 示例

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hi无涯教程

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

chrome下jq width()方法取值为0的解决方法

12-10

http://photo.163.com/shixiaojian089/train/28002 这是网易的一个相册，看到后想试着做做看。在我的制作方法中，需要获取到每张照片的宽度，所以很自然就使用了jq的width()方法。在ff跟ie下运行问题不大，但是到了chrome上，就出现问题了。使用alert排查，发现chrome下width方法取到的值都是0.这样子的话，想来就是脚本运行到这的时候图片根本没加载好。问题应该出在$(function(){});上，因为这个方法只要求加载完dom就开始运行。那么改成在onload下执行，果然这下可以了。不过这明显不是很好的办法，毕竟在onload下

Basic-Jquery-Slider:基本的 Jquery 滑块

06-19

**jQuery 滑块基础教程** 在网页设计中，滑块是一种常见的交互元素，用于展示多张图片或信息，常用于轮播广告、产品展示等。JQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理以及动画效果。在...

参与评论您还未登录，请先登录后发表或查看评论

$(window).width()与window.innerWidth的区别

热门推荐

宁静致远

06-02

2万+

window.innerWidth能获得什么数据？在自适应设计中，需要用js来判断浏览器宽度，从而调整网页宽度和布局，我一开始用的是window.innerWidth。 window.innerWidth能获取当前窗口的宽度(包含滚动条)，当浏览器宽度调整时，这个值也会跟着变化。但是，window.innerWidth在IE8浏览器是无效的。所以，需要使用一个代替品，那就是$

获取浏览器窗口宽度遇到的小bug

weixin_48156583的博客

07-05

279

获取浏览器窗口宽度遇到的小bug，用$(document).width()与实际宽度有偏差

详解 $().css('width')和$().width()的区别

weixin_30955617的博客

10-25

566

　　在本次项目开发中，经常用jquery获取高度和宽度并且动态加载，有时候用$().css('width')或$().width()这两个方法获取宽度并设置，但是有时候出现获取不到的情况，查阅资料后发现他俩之间即相同又不同。　　概念：　　 1.$().css() 　　　在w3c jQuery的文档中，$().css()方法设置或返回被选元素的一个或多个样式属性。$().css()在设置多个属性时...

zoomove-jQuery图片内部放大和移动插件

12-10

在上述代码中，我们首先引入了jQuery库和Zoomove插件的脚本，然后在`$(document).ready`函数中对ID为`myImage`的图片应用了Zoomove插件，并设置了放大倍数为1.5，开启跟随鼠标移动的效果。此外，Zoomove插件还支持...

jquery自定义函数的多种方法

12-02

这里我们探讨几种不同的方法来实现jQuery自定义函数。首先，我们可以直接在jQuery对象上定义方法。比如： ```javascript $.windowbox = { aa: function() { alert("aa"); }, bb: function() { alert("bb"); ...

jquery插件库-jquery弹出层三种弹出效果.zip

03-15

例如，使用`animate()`方法并配合 easing 函数（如`easeOutBounce`）可实现类似效果。 4. 使用jQuery插件库在实际开发中，为了快速实现弹出层效果，开发者常常选择使用成熟的jQuery插件，如jQuery UI的Dialog组件...

涉及js或jq中的$().width(), clientWidth, offsetWidth各种尺寸问题的一个将页面分隔成左右两部分可任意调整尺寸的DEMO

sosososolong的博客

05-20

786

假如有这样的一个需求, 一个页面分成左右两个部分, 左右的中间再放一个宽度为10px"分隔条", 两部分的尺寸可以通过鼠标拖动中间的"分割条"来任意调整, 用js实现这个动态效果, 会操作到关于元素的很多尺寸属性, 这里是完整的代码和详细的注释, 通过代码可以了解到实现这个动态效果的思路, 通过注释以及自己的实验, 可以了解到元素的各种尺寸的具体含义, 如$().width(), eleObj.c...

jQuery - 尺寸

孤云博客

01-18

302

$(window).width()获取宽度错误

淘淘小窝

12-01

8088

今天遇到个问题,$(window).width() ,获取的宽度少了20-30px 分析: 内容出现滚动条,这个获取宽度的方法没有计算滚动条宽度. 解决: window.innerWidth 使用原生js的这个方法获取窗口宽度。具体描述请参考: jquery中 $(window).width()与window.innerWidth的区别，这篇文章

chrome下jq width()方法取值为0

yeahsing的专栏

06-26

1394

jQuery获取width为0，获取隐藏元素实际宽度

快乐每一天

01-21

2171

$("#pageLoadingInnerDiv").css("display", "block"); var iconMarginLeft = (926-jQuery("#pageLoadingTipMsg").width())/2; jQuery("#pageLoadingInnerDiv > div:first").css("margin-left",

jQ获取浏览器window的高宽

liudanyang_21的博客

07-10

515

Window 对象Window 对象表示浏览器中打开的窗口。JavaScript 层级中的顶层对象，表示浏览器窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。注释：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。使用jQuery可以这样获取window的宽高：宽度： $(window).width() 高度： $(window).height()实际效果：相同的.

jQuery width( ) 方法

m0_57835615的博客

06-11

746

jQuery width( ) 方法可用于设置或返回被选元素的高度。返回元素的高度时，只返回匹配到的第一个元素的高度。设置元素的高度时，所有匹配到的元素的高度都会被设置。值得一提的是，该方法不包含元素的内外边距以及边框。 ...