访问元素大小


可以透过样式的widthheight来设定元素的宽高,但要注意所谓的宽高定义为何,一个元素的宽高如何定义,要看盒模式(Box model),也就是将元素当作一个盒子来看待,每个元素都会有四个部份可以设定。

访问元素大小

内容(content)就是放置元素真正有内容的部份,像是一段文本、一个图片或者是其它子元素。每个元素都可以有边框(border)。内距(padding)是指内容区与边框的距离。边距(margin)则是指与另一元素的边框距离。内容可以设定宽、高,内距的上、下、左、右可以分别设定距离,边框可以设定宽度,而边距的上、下、左、右可以分别设采定距离。

当指定元素的widthheight时,在标准 CSS 盒模型,指定的widthheight仅指定内容区大小。

访问元素大小

在遵守标准的浏览器中,就是采取这种盒模型。例如下面这个范例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
      img {
          color: #ffffff;
          background-color: #ff0000;
          border-width: 10px;
          border-color: black;
          border-style: solid;
          width: 100px;
          height: 82px;
          padding: 50px;
          margin: 10px;
      }

      div {
          color: #ffffff;
          background-color: #ff0000;
          border-width: 10px;
          border-color: black;
          border-style: solid;
          text-align: center;
          width: 100px;
          height: 82px;
          padding: 50px;
          margin: 10px;
      }            
    </style>
</head>
<body>

    <img src="https://openhome.cc/Gossip/images/caterpillar_small.jpg">
    <div>内容</div>

</body>
</html>

按此观看结果

范例中的图就是内容区,宽、高为 100x82,加上内距 50px 与边框 10px,元素视觉上看得到的部份为 (100+502+102)x(82+502+102),也就是 220x202。下方了一个内容区宽、高,内距与边框相同的<div>以资对照。

访问元素大小

每个元素都会有offsetWidthoffsetHeight特性,这两个特性是只读的,可分别获取元素的宽与高,在标准 CSS 盒模型下,所获取的是边框、内距与内容区的累加大小:

访问元素大小


展开阅读全文