javascript设置表格的宽度和高度

JavaScript012

javascript设置表格的宽度和高度,第1张

window.outerheight

窗口总高度

和window.screen.availheight一样

window.innerheight

窗口可视区域高度

window.screen.height

显示器屏幕高度

另外:jquery获取高度

$(".thiscrumbs").height()

元素本身高度

$(".thiscrumbs").innerheight()

元素高度+内边距

$(".thiscrumbs").outerheight()

元素高度+内边距+边框

$(".thiscrumbs").outerheight(true)

元素高度+内边距+边框+外边距

初次学习帆软,第一张报表,由于字段比较多,预览发现有很多字段显示不出来。经查询资料发现是设置有问题。解决方案如下:

1.模板-模板自适应属性。

2.可设置字体与表格的自适应方式

现实世间里,一个物体的宽度是明确的、没有异议的,而在JS的世界里,却有好几种获取div宽度的方法,有时这些方法获取的结果是一致的,有时确不尽相同,这一度让我很困惑。

为了理解width,我们创建一个宽200、高100的div来辅助学习:

首先我先给上结论,之后我会用例子验证结论的正确性:

其中,clientWidth和offsetWidth是原生dom对象的属性,其余的是jQuery对象的方法。

那么下面我们开始验证结论的正确性,此时内容宽度是200px,padding和border都是0px。

因此:

再用浏览器开发者工具(F12)的console验证,此时结论正确:

接着,我们给div加上左右padding(左右padding分别设为20px和30px):

如果你们跟着写这个demo进行验证,可以发现,在浏览器中,这个div变宽了,那是因为此时用css设定的宽度200是针对内容的,而div的可视区域包括padding和border,因此padding变大了,div也就变大了。

我们接着算现在各种方式的宽度:

验证:

我们再给div加上左右border(左右边框分别设为10px和15px):

计算宽度:

验证:

最后,我们给div加上左右margin(左右margin分别设为16px和32px):

计算宽度:

验证:

至此幸不辱命,结论悉数验证通过(验证使用的是谷歌核心的浏览器),不过还有一点要说明一下:

上面我们说过,css设定的宽度200是针对内容的,其实当我们给div加上样式 box-sizing:border-box 的时候, width:200px 的作用范围就变成也包括border和padding,我们再来验证一下上面最后的那个例子,首先计算宽度:

验证:

此种情况下,结论依然正确,希望至此大家已经理解各种获取div宽度的属性和方法。