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

Posted 2023-03-25

技术标签:

【中文标题】脚本未从外部文件加载 css 属性【英文标题】：Script not loading css properties from external file 【发布时间】：2021-10-12 19:11:15 【问题描述】：

这是我的 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;

显然，我的画布元素的宽度是 480，但由于某种原因，alert(c.width) 返回 300。

【问题讨论】：

【参考方案1】：

这是因为c.width 指的是元素的宽度属性。如果 canvas 元素中不存在该属性，您将获得它的默认值，即 300 像素。高度（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>

【讨论】：

虽然这确实像预期的那样返回 480，但我仍然遇到一个问题，即绘制方法仍然认为画布是 300x150，画布渲染拉伸到 480x360。有什么办法可以解决这个问题吗？在这种情况下，您必须使用宽度和高度属性。那是因为“width 和 height 属性决定了画布坐标系的宽度或高度，而 CSS 属性只决定了显示它的框的大小”，正如 SamB 在这个问题中的回答：@ 987654321@.【参考方案2】：

尝试使用c.offsetWidth 而不是c.width。正如@BrunoSdoukos 已经在您尝试使用它的上下文中提到的width 要求您将宽度设置为<canvas> 元素上的属性，如下所示：