`
747017186
  • 浏览: 319052 次
社区版块
存档分类
最新评论

jquery 里面的各种宽高

 
阅读更多

<style type="text/css">

div{

border: 1px solid #000000;

width: 2000px;

height: 1000px;

padding:10px;

margin: 10px;

}

</style>

<script type="text/javascript" src="<%=path %>/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

alert("height:"+$('div').height()+",width:"+$('div').width());

                        //元素本身的宽度和高度,height:1000,width:2000

 

alert("innerHeight:"+$('div').innerHeight()+",innerWidth:"+$('div').innerWidth());

                      //元素的宽度和高度加上留白的内宽度和内高度(padding)不包括边框线的宽度 ,不包括外                         部宽 度和 高度(margin)。height:1020,width:2020。

 

alert("outerHeight:"+$('div').outerHeight()+",outerWidth:"+$('div').outerWidth());

                       //元素本身的宽度和高度加上留白的内宽度和内高度(padding)再加上边框线的宽度                              (border-width)。不包括外边框的宽度和高度(margin)。height:1022;width:2022

 

alert("outerHeight(true):"+$('div').outerHeight(true)+",outerWidth(true):"+$('div').outerWidth                         (true));

                    //包括所有的内部宽度和高度(padding)边框线宽度(border-width)和外部高度和宽度                             (margin)。height:1042,width:2042

});

</script>

  </head>

  

  <body>

 <div>

 neirong

 </div>

分享到:
评论

相关推荐

    jQuery容器的自适应.pptx

    innerWidth()和 innerHeight()是指元素里面内容的宽高加上内边距的宽高; outerWidth()和 outerHeight()是指元素里面内容的宽高加上内边距的宽高和边框; 1、元素的宽和高 div{ width: 300px; height: 300px; ...

    宽屏可左右切换的jQuery焦点图插件

    昨天我们刚分享过9个精巧绚丽的jQuery图片滑块动画,里面有很多实用的jQuery焦点图插件,大家可以看看。今天要继续为大家分享一款很不错的jQuery焦点图插件,它是宽屏展示的,而且有两个大气的按钮用来左右切换图片...

    jQuery js css浮动框架加载连接自适应宽高

    之前发布了一个这样的功能,但是不是很完善,谢谢网友们提供的宝贵意见。... 2、使用最新Jquery cdn版本; 3、去掉多余的CSS和JS代码; 4、发布在个人博客里面,详细:http://www.saecn.com/?p=173

    jQuery获取file控件中图片的宽高与大小

    如何判断input file表单里上传的图片的宽高和大小呢? 解决方案 这个时候图片还没真正上传,也不是在页面上展示,不能使用$(“#id”).width(),$(“#id”).height()这种方式。 在Stack Overflow找到一个方法获取input...

    jquery动画导航栏制作实例集,三个漂亮动感菜单.rar

    jQuery制作的动画导航栏,里面包含了三个菜单,每一款都有特点: 范例一特点:用背景图实现(带圆角,注意图的做法,两张或整合成),主要用于导航栏项目文字长短不一的情况(不定宽!) 范例二特点:用背景图或背景色...

    基于JQUERY的改进型浮动层(右键)列表菜单

    菜单显示不再以鼠标事件发生点e为坐标,会根据浏览器视窗的大小以及菜单的宽高、事件发生的坐标为判断条件, 以确保菜单显示时不会让浏览器的滚动条出现或长度改改,同时又能在现有视窗中完整显示菜单所有内容。 在...

    基于jquery的改进型(右键)列表菜单

    菜单显示不再以鼠标事件发生点e为坐标,会根据浏览器视窗的大小以及菜单的宽高、事件发生的坐标为判断条件, 以确保菜单显示时不会让浏览器的滚动条出现或长度改改,同时又能在现有视窗中完整显示菜单所有内容。 在...

    jquery.easydrag.handler.beta2.js

    用法: $(“#box”).easydrag();//给指定的标签绑定拖动效果,也可以是Class ...将里面的$(“#”+handlerId)都改成$(“.”+handlerId)就可以了。好吧,这样就可以了,下面是实例,高手们请 无视好了。。。

    [原创]基于Jquery的PANEL窗体插件

    花生米AJAX-UI系列之:基于JQUERY的GooPanel窗体控件类0.1版 ...其中绑定“重定义窗体宽高”事件很有用,比如用在窗体尺寸变化后,将内容框里的DOM元素重新Resize. 本品兼容IE6--IE8 ,firefox,chrome浏览器

    js返回top js实时读取浏览器宽度大小 jQuery

    里面包含 js自动实时判断浏览器窗口大小(有拆分出来)的功能,灵活变通下可以变换成多种代码比如双联广告等。 代码小巧注释清晰容易修改……绝对是你想要的。 另外附上平时收集的的多种常用js代码: js实现...

    js返回头部,js自动适应浏览器宽度 js自动判断宽高

    里面包含 js自动实时判断浏览器窗口大小(有拆分出来)的功能,灵活变通下可以变换成多种代码比如双联广告等。 代码小巧注释清晰容易修改……绝对是你想要的。 另外附上平时手机的多种常用js代码: js实现段落...

    基于jQuery实现放大镜效果

    方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置。 方法二:对原图片进行放大,也就是调整原图的长和宽。 上面我们介绍了通过两种方式实现放大镜效果,接下来,我们将以上的两种方式应用到...

    jquery实现在页面加载完毕后获取图片高度或宽度

    里面写了之后发现不是很理想,因为当jquery准备就绪的时候,此时图片绝大部分情况下都没加载完毕,这可急坏了本屌丝~~~T~T 本屌丝就想啊,要是jquery有个跟js的onload()的方法多好啊,擦~真是天上掉下个大狗屎,恰巧...

    基于JQuery实现图片轮播效果(焦点图)

    改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize。 兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改。 ...

    jquery 弹出登录窗口实现代码

    当事件触发这个类时,首先判断一下两个层是否已经append到body里面,否则每次触发它就一直增加增加了。设置了五个参数title、 content、width、height、cssName,它们分别定义了层标题、层内内容、层宽、层高、层...

    jQuery实现瀑布流布局详解(PC和移动端)

    可以看到,它里面实际是若干个等宽的列容器,通过计算将图片push到不同的容器里。而本文介绍的展示方法是通过定位的方式,虽然最后布局展示的方式不同,但之前的算法都比较类似。 动手 首先我们将如下样式的若干个...

    Jquery轮播效果实现过程解析

    其次,css样式:div固定住宽高,overflow:hidden;ul的宽度建议是动态获取(下一步会讲是怎么获取);关于li我习惯使用浮动,让他们依次排列,在ul上要记得清楚浮动(clear:both)。 重要的是jquery的方法,主要有...

    基于jquery实现轮播特效

     其次,css样式:div固定住宽高,overflow:hidden;ul的宽度建议是动态获取(下一步会讲是怎么获取);关于li我习惯使用浮动,让他们依次排列,在ul上要记得清楚浮动(clear:both)。  重要的是jque

    jquery实现横向图片轮播特效代码分享

    改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize。 兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改。...

    jQuery代码实现图片墙自动+手动淡入淡出切换效果

    添加一个div(class=container),设置宽度和高度,这里设置了宽800px,高450px。添加居中的定位。在div里面添加一个ul(class=”img”)列表用来盛放图片,设置ul里面的li标签position为absolute,这时图片会重合在...

Global site tag (gtag.js) - Google Analytics