第一百二十五章 宽高

有了样式我们就为所欲为了!?

这个链接元素的宽高是多少呢?用 css 方法是得不到的,因为行内元素没有宽高啊,设置了也不起作用。

可是一个元素,在页面中,总是要有一个尺寸的,它占用的面积,或者什么的。那它显示出来的尺寸是多少呢?

const width = $('a').width();const height = $('a').height();

获取的是宽高的尺寸,以像素为单位,但是获得的只有值,不带单位。类型是数字,不用转换,直接可以参与各种计算,十分方便。

这点还真的要注意,比如我们用 val 获得的数据一般是字符串类型,就算是一个只能输入数字(type="number")的输入框,获取的值也是字符串类型。想进行数学计算,一定要先转换类型,否则……'1'+'1'='11' 就比较尴尬。

能获取,也能够用来设置:

$('a').width(12);$('a').height(12);

不过这个设置就弱一点,等效于:

$('a').css('width', '12px');$('a').css('height', '12px');

就是写起来简单,不用再特别加上单位了而已。你也可以给它指定单位,而不使用默认的像素作为单位。

宽和高就说完了,是不是觉得我这几章越来越短?!那我们继续……毕竟尺寸这个事情,哪有可能如此简单。

innerWidth 和 innerHeight 就是里面的宽度和高度。什么是里面?一个箱子,里面的尺寸,就是四壁之内的尺寸。所以这个宽高包含内补,不包含边框。

说到这里惊觉,上面的 width 和 height 说得好像很不明确啊,到底指的是怎样的宽高呢?这不太好说,尤其是考虑了 CSS 中的 box-sizing 属性之后。而且不同的 jQuery 版本,表现还不尽相同……所以,没啥特殊情况就别用它们了。

有了内部,就有外部:outerWidth 和 outerHeight。这是元素的外部尺寸,那就是边框以外的尺寸,默认不包含外补。但可以在后面的小括号里放一个布尔型的数据,来指定是否包含外补:

const width = $('#miao').outerWidth(true);const height = $('#miao').outerHeight(true);

这样获取到的值就包含外补。

但是,这些值都作为参考,不是绝对的准确,可能的影响因素还是很多的,可别说绝对,没有绝对。

可以获取,也可以用来设置。方法和 width 和 height 是一样的。但是效果上,是将设置的值减去了相应的内补、外补、边框宽度之后,以 CSS 中的 width 和 height 属性设置给元素的。

最好,自己动手试试,谁指的是哪部分的尺寸,设置出来的是什么效果,就很容易弄明白了。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百二十五章 宽高

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏