Скрипт не загружает свойства css из внешнего файла

avatar
Tetra Pengwin
9 августа 2021 в 02:22
79
2
0

вот мои 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.

Источник

Ответы (2)

avatar
user11229156
9 августа 2021 в 02:34
2

Это происходит потому, что c.width относится к атрибуту ширины элемента. Если этот атрибут отсутствует в элементе холста, вы получите для него значение по умолчанию, равное 300px. То же самое произойдет с высотой (150 пикселей).

Чтобы получить реальную ширину холста, вы можете использовать getBoundingClientRect(). Кроме того, не забудьте добавить «px» после числовых значений ширины и высоты CSS.

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>
Tetra Pengwin
9 августа 2021 в 02:45
0

Хотя это возвращает 480, как и ожидалось, у меня все еще есть проблема, когда методы рисования по-прежнему считают, что холст имеет размер 300x150, а рендеринг холста растягивается до 480x360. Можно ли как-то решить и эту проблему?

user11229156
9 августа 2021 в 02:52
1

В этом случае необходимо использовать атрибуты ширины и высоты. Это связано с тем, что атрибуты width и height определяют ширину или высоту системы координат холста, тогда как свойства CSS просто определяют размер поля, в котором он будет отображаться», как из ответа SamB на этот вопрос: coderhelper.com/questions/2588181/….

avatar
kazblacktopp
9 августа 2021 в 02:50
-1

Попробуйте использовать c.offsetWidth вместо c.width. Поскольку @BrunoSdoukos уже упоминал width в контексте того, как вы пытаетесь его использовать, требуется, чтобы вы установили ширину в качестве атрибута элемента <canvas>, например:

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

Поскольку для самого элемента HTML не задан атрибут ширины, использование c.width вернет ширину по умолчанию, которая составляет 300 пикселей.

Поскольку вы указали ширину элемента с помощью CSS, чтобы получить ширину элемента, в этом случае вы должны использовать:

c.offsetWidth

Вот что MDN говорит о HTMLElement.offsetWidth:

Обычно offsetWidth представляет собой измерение в пикселях ширины элемента CSS, включая любые границы, отступы и вертикальные полосы прокрутки (если они отображаются). Он не включает ширину псевдоэлементов, таких как ::before или ::after.

Подробнее об этом объекте можно узнать здесь:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth