jq各个宽高,用canvas画三个等腰三角形

By admin in 4858美高梅 on 2019年4月16日

4858美高梅 1

曾经碰到过如此的难题,设定一个div,当给div设置padding的时候,发现任何div的宽高都时有爆发了改换,那里就产生了2个迷惑,三个盒子的1体化宽高到底是怎么去看清的啊?

JS下种种宽高


Window和Document:
JS下宽高分为挂载在Window对象Document对象下的宽高属性,先说下WindowDocument的区别:

  • Window对象意味着浏览器中打开的窗口,window对象可以总结,比如window.alert()能够简写为alert()
  • Document对象Window对象的壹有个别,那么window.document.body我们得以写成document.body,浏览器的HTML文档成为Document对象

jq各个宽高,用canvas画三个等腰三角形。Window下的宽高属性:

window.innerWidth:浏览器窗口内部宽度
window.innerHeight:浏览器窗口内部高度
window.outerWidth:浏览器窗口外部宽度
window.outerHeight:浏览器窗口外部高度
window.screen.width:屏幕宽度
window.screen.height:屏幕高度
window.screen.availWidth:屏幕的可使用宽度
window.screen.availHeight:屏幕的可使用高度
window.screenTop:浏览器窗口距屏幕顶部的距离
window.screenLeft:浏览器窗口距屏幕左侧的距离

注:innerWidth、innerHeightouterWidth、outerHeight是不接济IE9以下版本的,而screen种类宽高则不设有包容难题
参考图如下:

4858美高梅 2

Document下的宽高属性:
Docment下有三类属性:

  • client有关的宽高
  • offset连带的宽高
  • scroll相关的宽高

client连锁的宽高:

document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop

clientWidthclientHeight该属性指的是因素的可视部分宽度和冲天,即padding+content

  • 若是未有滚动条,即为成分设定的冲天和幅度
  • 假若出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高

clientLeftclientTop那多少个再次回到的是因素周边边框的厚薄,假诺不内定1个边框或许不定点该因素,它的值正是0

clientTop = border-top.border-width
clientLeft = border-left.border-width

收获浏览器窗口可视区域大小在分裂浏览器都实用的JS方案:

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

offset连带宽高介绍:

document.body.offsetWidth
document.body.offsetHeight
document.offsetLeft
document.offsetTop

offsetWidthoffsetHeight这1对属性指的是因素的border+padding+content的增长幅度和惊人
该属性和其内部的始末是不是超过成分大小毫不相关,只和自然设定的border以及paddingcontent有关
offsetLeftoffsetTop这七个属性是依照offsetParent的,精晓那七个属性我们务必先驾驭怎么样是offsetParent
若果当前因素的父级成分未有进展CSS定位(positionabsoluterelative),offsetParentborder.
假诺当前因素的父级成分中有CSS定位,offsetParent取近来的不得了父级成分。

  • IE6/7中:offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)
  • IE8/9/10Chrome中:offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left)
  • FireFox中:offsetLeft=(offsetParent的margin-left)+(offsetParent的padding-left)+(当前元素的margin-left)

scroll连带宽高介绍:

document.body.scrollWidth
document.body.scrollHeight
document.body.scrollLeft
document.body.scrollTop

scrollWidthscrollHeight:

  • 给定宽高级小学于浏览器窗口:
    scrollWidth:浏览器窗口的上涨的幅度
    scrollHeight:浏览器窗口的冲天
  • 给定宽高超过浏览器窗口,且内容小于给定宽高:
    scrollWidth:给定的上升的幅度+其具有padding、margin、border
    scrollHeight:给定的可观+其有着的padding、margin、border
  • 给定宽高超越浏览器窗口,且内容超越给定宽高:
    scrollWidth:内容宽度+其持有的padding、margin、border
    scrollHeight:内容惊人+其抱有的padding、margin、border

scrollLeftscrollTop那对质量是可读写的,指的是当成分在这之中的始末超过其宽高的时候,成分被卷起来的上涨的幅度和冲天

(转)JS下各类宽高

转自https://segmentfault.com/a/1190000007681873


Window和Document:
JS下宽高分为挂载在Window对象Document对象下的宽高属性,先说下WindowDocument的区别:

  • Window对象意味着浏览器中展开的窗口,window对象能够简轻便单,比如window.alert()能够简写为alert()

  • Document对象Window对象的一片段,那么window.document.body大家得以写成document.body,浏览器的HTML文档成为Document对象

Window下的宽高属性:

window.innerWidth:浏览器窗口内部宽度
window.innerHeight:浏览器窗口内部高度
window.outerWidth:浏览器窗口外部宽度
window.outerHeight:浏览器窗口外部高度
window.screen.width:屏幕宽度
window.screen.height:屏幕高度
window.screen.availWidth:屏幕的可使用宽度
window.screen.availHeight:屏幕的可使用高度
window.screenTop:浏览器窗口距屏幕顶部的距离
window.screenLeft:浏览器窗口距屏幕左侧的距离

注:innerWidth、innerHeightouterWidth、outerHeight是不援救IE9以下版本的,而screen层层宽高则不存在包容难点
参考图如下:

4858美高梅 3

image.png

Document下的宽高属性:
Docment下有三类属性:

  • client相关的宽高

  • offset有关的宽高

  • scroll相关的宽高

client相关的宽高:

document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop

clientWidthclientHeight该属性指的是因素的可视部分宽度和中度,即padding+content

  • 一旦未有滚动条,即为成分设定的万丈和增长幅度

  • 假若出现滚动条,滚动条会遮盖成分的宽高,那么该属性正是其本来宽高减去滚动条的宽高

clientLeftclientTop那五个再次回到的是因素左近边框的厚薄,即使不点名1个边框或然不定点该因素,它的值就是0

clientTop = border-top.border-width
clientLeft = border-left.border-width

赢得浏览器窗口可视区域大小在区别浏览器都实用的JS方案:

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

offset连锁宽高介绍:

document.body.offsetWidth
document.body.offsetHeight
document.offsetLeft
document.offsetTop

offsetWidthoffsetHeight那一对属性指的是因素的border+padding+content的上涨的幅度和中度
该属性和当中间的内容是不是高于成分大小非亲非故,只和自然设定的border以及paddingcontent有关
offsetLeftoffsetTop那四个属性是依照offsetParent的,精晓那多少个属性大家不可能不先理解如何是offsetParent
假使当前成分的父级成分未有进展CSS定位(positionabsoluterelative),offsetParentborder.
4858美高梅,设若当前因素的父级成分中有CSS定位,offsetParent取方今的丰富父级元素。

  • IE6/7中:offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)

  • IE8/9/10Chrome中:offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left)

  • FireFox中:offsetLeft=(offsetParent的margin-left)+(offsetParent的padding-left)+(当前元素的margin-left)

scroll相关宽高介绍:

document.body.scrollWidth
document.body.scrollHeight
document.body.scrollLeft
document.body.scrollTop

scrollWidthscrollHeight:

  • 给定宽高小于浏览器窗口:
    scrollWidth:浏览器窗口的宽窄

scrollHeight:浏览器窗口的可观

  • 给定宽高超越浏览器窗口,且内容小于给定宽高:
    scrollWidth:给定的大幅度+其独具padding、margin、border

scrollHeight:给定的万丈+其抱有的padding、margin、border

  • 给定宽高超过浏览器窗口,且剧情赶上给定宽高:
    scrollWidth:内容宽度+其负有的padding、margin、border

scrollHeight:内容惊人+其独具的padding、margin、border

scrollLeftscrollTop那对品质是可读写的,指的是当成分当中的始末凌驾其宽高的时候,成分被卷起来的大幅度和惊人

  上海教室是代码,注意,宽高只有在canvas标签内部安装宽高,绘制的路子显示才是健康的;效果如下:

透过查询得知,盒子宽高的论断形式一共有三种,分别为规范方式古怪方式

Event对象的5种坐标

clientX和clientY,相对于浏览器(可视区左上角0,0)的坐标
screenX和screenY,相对于设备屏幕左上角(0,0)的坐标
offsetX和offsetY,相对于事件源左上角(0,0)的坐标
pageX和pageY,相对于整个网页左上角(0,0)的坐标
X和Y,本来是IE属性,相对于用CSS动态定位的最内层包容元素

Event对象的5种坐标

clientX和clientY,相对于浏览器(可视区左上角0,0)的坐标
screenX和screenY,相对于设备屏幕左上角(0,0)的坐标
offsetX和offsetY,相对于事件源左上角(0,0)的坐标
pageX和pageY,相对于整个网页左上角(0,0)的坐标
X和Y,本来是IE属性,相对于用CSS动态定位的最内层包容元素

  4858美高梅 4

为了能更加好的明亮大家先设定两个div并给它设定样式:

JQuery下各样宽高


width():元素的content区域宽度
height():元素的content区域高度
innerWidth():元素的content+padding区域宽度
innerHeight():元素的content+padding区域高度
outerWidth(Boolean):可选,默认表示元素的content+padding+border区域的宽度,如果为true表示元素的content+padding+border+margin区域的宽度
outerHeight(Boolean):可选,默认表示元素的content+padding+border区域的高度,如果为true表示元素的content+padding+border+margin区域的高度
scrollLeft():相对于水平滚动条左边的距离
scrollTop():相对于垂直滚动条上边的距离
offset():返回相对于document的当前坐标值,包含left、top值
position():返回相对于offsetParent的当前坐标值,包含left、top值

正文整理自慕课网课程《JS/jQuery宽高的领悟和动用》

JQuery下各个宽高


width():元素的content区域宽度
height():元素的content区域高度
innerWidth():元素的content+padding区域宽度
innerHeight():元素的content+padding区域高度
outerWidth(Boolean):可选,默认表示元素的content+padding+border区域的宽度,如果为true表示元素的content+padding+border+margin区域的宽度
outerHeight(Boolean):可选,默认表示元素的content+padding+border区域的高度,如果为true表示元素的content+padding+border+margin区域的高度
scrollLeft():相对于水平滚动条左边的距离
scrollTop():相对于垂直滚动条上边的距离
offset():返回相对于document的当前坐标值,包含left、top值
position():返回相对于offsetParent的当前坐标值,包含left、top值
1     #content1{
2         width: 200px;
3         height: 200px;
4         border: 2px solid black;
5         margin: 20px;
6         padding: 20px;
7     } 

诚如景况下个盒子的宽高在形似情状下等于内容的宽高+边框的宽高+内边距的宽高+外边距的宽高

 4858美高梅 5那正是行业内部方式下的盒子宽高推断

 

但在1些时候(ie六,七,8下DOCTYPE缺点和失误)盒子的宽高档于设定的宽高+外边距的宽高,那里的设定的宽高就等于内容的宽高+内边距的宽高+边框的宽高

4858美高梅 6那正是千奇百怪情势下的盒子宽高决断

 

我们能够通过使用box-sizing属性来决定利用哪1种格局,

content-box : 将采用专业方式解析计算 ,

border-box: 将采用光怪6离方式解析计算; 

经过美妙形式大家能够在不转移盒子全体宽高的气象下给其设定padding。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有