05 - outerHeight、outerWidth 和 innerWidth、innerHeight 和 width() height()

一、jQuery方法 outerWidth() 和 outerHeight()

1.outerWidth()

   - 方法返回第一个匹配元素的外部宽度。

 - 返回第一个匹配元素的外部宽度。该宽度= content + padding + border

- 如需包含 margin,使用 outerWidth(true)。该宽度= content + padding + border + margin

<style>
    .box {
        width: 200px;
        height: 200px;
        padding: 20px;
        border: 4px solid red;
        margin: 20px;
    }
</style>
<div class="content">
    <div class="box">boxbox</div>
</div>
<script>
    console.log($(‘.box‘).outerWidth());    // 248
    console.log($(‘.box‘).outerWidth(true));    // 288
</script>

2.outHeight()

- 方法返回第一个匹配元素的外部高度。

 - 返回第一个匹配元素的外部宽度。该宽度= content + padding + border

- 如需包含 margin,使用 outerWidth(true)。该宽度= content + padding + border + margin

console.log($(‘.box‘).outerHeight());    // 288
console.log($(‘.box‘).outerWidth(true));    // 288

参考:https://www.w3cschool.cn/jquery/html-outerwidth.html

二、jQuery方法:innerWidth() 和 innerHeight()

1. innerWidth()

- 返回第一个匹配元素的内部宽度。该方法包含 padding,但不包含 border 和 margin。

2. innerHeight()

  - 返回第一个匹配元素的内部高度。该方法包含 padding,但不包含 border 和 margin。

console.log($(‘.box‘).innerWidth());    // 240
console.log($(‘.box‘).innerHeight());    // 240

三、jQuery:width() 和 height()

1.width()

- 方法设置或返回被选元素的宽度。

- 当该方法用于返回宽度时, 则返回第一个匹配元素的宽度。

- 当该方法用于设置宽度时,则设置所有匹配元素的宽度。

- 该方法不包含 padding、border 或 margin。

// 使用方式一
$(selector).width()
// 使用方式二
$(selector).width(length)

// 使用方式三(注意)
$(selector).width(function(index,oldwidth))
eg:
<p style="background-color:yellow">这是一个段落。</p>
<button>以 50 像素的幅度减少 p 元素的宽度</button>

$("p").width(function(n,c){
    return c-50;
});

  w3c参考示例https://www.w3school.com.cn/tiy/t.asp?f=jquery_css_width_set_function

         :https://www.w3school.com.cn/jquery/css_width.asp

2.height()

和width()类似

- 方法设置或返回被选元素的高度。

- 当该方法用于返回高度时, 则返回第一个匹配元素的高度。

- 当该方法用于设置高度时,则设置所有匹配元素的高度。

- 该方法不包含 padding、border 或 margin。

  w3c文档https://www.w3school.com.cn/jquery/css_height.asp

四、window属性:outerWidth 和 outerHeight

1.Window.outerHeight

- 获取整个浏览器窗口的高度(以像素为单位)。它表示整个浏览器窗口的高度,包括边栏(如果展开),窗口chrome和窗口大小边框/手柄。

- 此属性是只读的;它没有默认值。

- 整个浏览器的高度

 参考链接https://www.w3cschool.cn/fetch_api/fetch_api-4yvg2rsk.html

2.Window.outerWidth

- 获取浏览器窗口外部的宽度。它表示整个浏览器窗口的宽度,包括边栏(如果展开),窗口chrome和窗口大小边框/手柄。

- 此属性是只读的;它没有默认值。

- 整个浏览器的宽度

 参考链接https://www.w3cschool.cn/fetch_api/fetch_api-yu1w2rub.html

五、window属性:innerWidth 和 innerHeight

1. Window.innerHeight

- 浏览器窗口 viewport 的高度。

- 表示浏览器窗口 viewport 的高度(以像素为单位),如果呈现的话,包括水平滚动条。

 参考链接https://www.w3cschool.cn/fetch_api/fetch_api-rf2u2nv2.html

2. Window.innerWidth

- 浏览器窗口 viewport 的宽度(以像素为单位),包括(如果呈现的话)垂直滚动条。

console.log(window.innerWidth);  // 880
console.log(window.innerHeight);  // 621

注:此时html 和窗口一样大小

 参考链接https://www.w3cschool.cn/fetch_api/fetch_api-wq672nxl.html

原文地址:https://www.cnblogs.com/xinghong/p/11388108.html

时间: 2024-10-03 03:52:33

05 - outerHeight、outerWidth 和 innerWidth、innerHeight 和 width() height()的相关文章

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.$(

如何正确使用width height 进行合理布局

两个问题引题 1)width,height设置为百分比 2)max-width , max-height 到底是什么意思 0.max-width,max-height 一帮情况使用在图形元素当中,原因是怕图片超出了父容器的大小,那么控制图片最大就是这个值,超过了则按这个值显示,如果没有超过则按 width height进行布局. 1.针对所有HTML元素都具有width 与 height ,而且 HTML标签属性与CSS属性在width和height中都是同样的作用. 2.关于width使用百分

[扩展]为UIView扩展x,y,width,height,centerX,centerY,Size,Origin等属性

大家应该知道如何设置一个view组件的位置把,是的,如下: view.frame=CGRectMake(x,y,width,height);//设置组件的x,y坐标,设置组件的宽度高度... 如果我单独要设置坐标或者宽度高度,得这样: view.frame.size.width=100; view.frame.size.height=100; 如果你想偷个懒,比如: view.frame.size=(CGSize){200,200};//这个语句会报错,因为无法对size赋值 通过上面的代码,大

as3:sprite作为容器使用时,最好不要指定width,height

除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 scaleY 属性会相应调整(width类推) 原作者:菩提树下的杨过出处:http://yjmyzz.cnblogs.com 也就是说,一个空的sprite,既使您设置了width,height也是没用的(而且人为设置了反而会有负作用,见下面的代码) 1 var _sprite:Sprite =

css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型.例如:div 2.行内替换元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型. 例如:img 2.行内非替换元素(重点) width. height不起作用,用line-height来控制高度.

css的width height

如果块级非替换元素没有显示width heigth属性,html的width:atuo 是浏览器可视区域width;height是元素内容的height;显示widht:auto height:auto的渲染效果和隐士效果一样; html的所有子元素(块级非替换元素)没有显示width:px等 则子元素的width值为html的width; 如果html显示width:px等 则所有子元素(块级非替换元素)的width值为html的width; 其他块级非替换元素也是如此;

element.getBoundingClientRect().width/height VS. element.offsetWidth/offsetHeight VS. element.clientWidth/clientHeight VS. element.scrollWidth/scrollHeight

获得元素尺寸可谓多种多样,但通常它们是有一定区别的. 先说说元素的getBoundingClientRect()方法,这个方法的width或height属性可以计算元素尺寸,但width或height除了本身的content的宽高之外还包括padding和border的部分,这里不得不说的一个属性就是元素的offsetWidth和offsetHeight属性,这俩属性和getBoundingClientRect()的width和height属性极其相似,也是包含padding和border的部分

jQuery 提供多个处理尺寸的重要方法:width() height() innerWidth() innerHeight() outerWidth() outerHeight()

一. width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或外边距). 二. innerWidth() 方法返回元素的宽度(包括内边距). innerHeight() 方法返回元素的高度(包括内边距). 三. outerWidth() 方法返回元素的宽度(包括内边距和边框). outerHeight() 方法返回元素的高度(包括内边距和边框). 四. outerWidth(true) 方法返回元素的宽度(包括内边

jquery-get-data(width,height,position,(top,left),scrollTop,scrollLeft)获取数据

获取尺寸 如下: heigh([val|fn]) width([val|fn]) innerHeight() innerWidth() outerHeight([soptions]) outerWidth([options]) 下面就一一介绍(这里多说一下jquery中很多都是既可以返回匹配元素的值,又可以设置匹配元素值) height()取得匹配元素当前计算的高度值(px). width()取得第一个匹配元素当前计算的宽度值(px). /此2个方法对可见和隐藏元素均有效.另外这个补白就是pad