脚本未从外部文件加载css属性

顺晟科技

2021-08-09 11:21:02

以下是我的2个文件

HTML:

<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <canvas id=myCanvas></canvas>

    <script>
      var c=document.getElementById("myCanvas");
      alert(c.width)
    </script>

  </body>

</html>

CSS:

canvas {
  width:480;
  height:360;
  position:absolute;
  background-color:grey;
}

显然，我的canvas元素的宽度应该是480，但是由于某些原因，alert(c.width)返回300.

顺晟科技：

发生这种情况是因为c.width引用了元素的width属性。如果该属性不存在于canvas元素中，您将获得它的默认值，即300px。对于身高(150px)也是如此。

要获得真正的画布宽度，可以使用getBoundingClientRect()。此外，不要忘记在宽度和高度的CSS数值后面添加“px”。

canvas { width: 480px; height: 360px; position:absolute; background-color:grey; } <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id=myCanvas></canvas> <script> var c = document.getElementById("myCanvas"); alert(c.getBoundingClientRect().width) </script> </body> </html>

尝试使用c.offsetWidth而不是c.width。@brunosdoukos在如何使用width的上下文中已经提到，需要将width设置为<canvas>元素的属性，如下所示:

<canvas id="myCanvas" width="480"></canvas>

因为HTML元素本身没有设置width属性，所以使用c.width将返回默认宽度，即300px.

因为您已经使用CSS指定了元素的宽度，以便在本例中获得元素的宽度，所以您应该使用:

c.offsetWidth

以下是MDN对htmlelement.offsetwidth的说明:

通常，offsetWidth是以像素为单位的元素CSS宽度的度量，包括任何边框、填充和垂直滚动条（如果呈现）。它不包括伪元素的宽度，如：：before或：：after。

您可以在以下位置准备有关此属性的更多信息:

https://developer.mozilla.org/en-美国/docs/web/api/htmlelement/offsetwidth

上一篇：如何通过`scrollto()`禁用下一篇：20前端HTML(1)

网站建设

Html

脚本未从外部文件加载css属性