jQuery .css("width")和.width()的区别

首先先解释下 普通元素非普通元素
非普通元素是指  window,document 这些元素对象,
普通元素是指  除window,document 这些非普通元素外 的元素,如:div

对于普通的元素 ,他们的作用相同。
比如
网页上有一个 div 元素:

<div style="width:200px;height:200px;"></div>

我们可以使用:
  $(function(){
     var width1 = $("div").css("width");
     var width2 = $("div").width();
  })
 
都可以获取到宽度width。
不过要注意:
.css("width")会带 单位,  例子中会输出: 200px ;
.width() 则不带单位 , 输出 200 ;

对于非普通元素,只能使用 .width()

如:
我们想获取 window对象的宽度,我们只能使用$(window).width(); 输出电脑屏幕的宽度;
使用$(window).css("width"); 输出 undifined

同理,.css("height")和.height()也一样。

时间: 2024-10-07 09:31:17

jQuery .css("width")和.width()的区别的相关文章

jquery css(&quot;width&quot;)与width()

css("width")返回的是字符串,..px width()返回的是浮点数,可用于运算,所以要将控件居中时需要用width()而不能用css("width") 1 function setCenter(tag){ 2 tag.css({"margin-left":parseFloat(tag.parent().width()/2-tag.width()/2)}); 3 tag.css({"margin-top":parse

CSS width:100%和width:auto的区别

width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ width:600px; overflow:auto; background:#ccc; } p{ width:auto; margin:10px; background:red; } </style> </head> <body> <div> <p>

jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读

在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用function(defaultExtra,funcName),也就是说传入的defaultExtra是键 padding/content/"",而funcName是对应的innerHeight,height,outerHeight. jQuery.fn[funcName]内部有四个分支:1.$(

【转】用CSS+DIV时width的问题

CSS盒子占据面积的大小一共是边距(margin)+边框(border)+填白(padding)+宽度(width).所以当你设置width:200px;border:1px xx xx;的时候,实际的这个DIV的width最大值还是200.只是DIV的实际占据页面的宽度是:1(左边框)+200(width)+1(右边框)=202所以这个DIV里面还有200的宽度可以容纳包含的DIV.当然如果里面的DIV宽度大于200,外面DIV定义的宽度就会失去效果. 注意啦!注意啦!重点地方要回答你了,如果

jquery中animate({left:&#39;-=&#39;+width})中的 &#39;-=&#39;+是什么意思?

left:'-='+width的意思是:left属性的最终值,是left现有值减去width这个值 例如:left:'200px' 意思是left最终值变成200left:'+200px' 意思与上面相同,是left最终值变成200left:'+=200px' 假设当前left为100 意思是left最终值是当前值加200 ,最终值为300 -=同理 -=应该是left=left-width的意思 https://zhidao.baidu.com/question/921906882845071

jquery的innerHeight()和outerHeight()的区别

jquery的innerHeight()和outerHeight()的区别:本章节介绍一下这两个函数的区别,从名称上看都是用来获取高度的,当然也是有区别的,从名称上也能够对其有一个简单的了解,下面就通过代码实例介绍一下这两者的区别.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="

Jquery中attr和prop的区别

jQuery之prop和attr的区别 1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( propertyName, function(index, oldPropertyValue) ) 给匹配元素集合设定一个或多个属性 .prop()和 .attr()区别 下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.at

【源码分享】jquery+css实现侧边导航栏

jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2css代码 这里是css代码,详情请看注释 1 <style>

jQuery&amp;CSS 顶部和底部固定浮动工具栏 兼容IE6

现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方.这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到. 其实这样的布局方式很早就有,只是没有那么个契机推广开吧.做起来也不复杂,只要设置一个小小的属性“position:fixed”便能完成,最关键的无不呼在于要兼容IE6而已. 首先我们来看HTML代码,是不是超简单?这里提供的只是一个简单的框架,实际应用的时候,只要把想要的元素添加东西就在这区域内加就行. HTML

jQuery css详解

今天确确实实是放了一天假,喝了点小酒,看了天天向上和快乐大本营以及中国好舞蹈,越来越热爱舞蹈了,还是总结一篇吧. @jquery css css(name|pro|[,val|fn):访问或设置匹配元素的样式属性 1 $("div").click(function(){ 2 $(this).css({width:20px,height:30px}) 3 }); offset([coordinates]):获取匹配元素在当前视口(body)的相对偏移 1 <p>hello b