Блог

Главная - Вопросы по программированию - Получение значения элемента с измененным размером css

Получение значения элемента с измененным размером css

#javascript #html #css #resize

#javascript #HTML #css — код #изменение размера

Вопрос:

Чего я хочу, так это того, что я могу получить значения CSS фигуры, размер которой был изменен пользователем с помощью свойства CSS resize . Есть ли способ получить значение CSS фигуры после того, как пользователь изменил ее размер с помощью plain JavaScript ? Он должен работать как для четырехугольников, так и для изогнутых фигур. Я новичок в программировании. Мой код до сих пор:

 <!DOCTYPE html><html>
<style>
#resizeable-shape{
height:7vh; width:7vh; background-color:blue; resize:both; overflow:auto; border-radius:50%;
</style>
<div id="resizeable-shape"></div>
</html>

Ответ №1:

Я предполагаю , что вы имели в виду dimensions под values . Итак, если это правда, то, пожалуйста, найдите приведенный ниже код для того же:

Объясненный код

Я использовал свойства offsetWidth и offsetHeight , чтобы получить ширину и высоту фигуры. Затем я использовал if оператор, в котором говорится: Если высота и ширина не 40px равны, то укажите размеры фигуры.

 function myFunction() {
  var shape = document.getElementById("resizeable-shape");
  var width = shape.offsetWidth;
  var height = shape.offsetHeight;
  if (width !== 40 || height !== 40) {
    alert("Width: "   width   "px n"   "Height: "   height   "px");
  }
} 
 #resizeable-shape {
  height:40px; 
  width:40px; 
  background-color:blue; 
  resize:both; 
  overflow:auto; 
  border-radius:50%;
} 
 <!DOCTYPE html>
<html>

<body>
<div id="resizeable-shape" onclick="myFunction()"></div>
</body>

</html>

Комментарии:

1. шьямат Сет Большое спасибо!

2. Возможно ли получить размеры в измерении vh?

3. Свойства offsetHeight и offsetWidth по умолчанию отображаются в пикселях. Так что, к сожалению, вы не можете получить их в измерении vh.