Блог

Главная - Вопросы по программированию - Изменяется ли ширина смещения Javascript DOM на разных устройствах?

Изменяется ли ширина смещения Javascript DOM на разных устройствах?

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

Я пытаюсь увеличить ширину объекта при нажатии кнопки при использовании Javascript. Он отлично работает на мобильном просмотре, а когда дело доходит до просмотра ноутбука, сначала уменьшает его ширину, а затем начинает работать. вы увидите, что я говорю, просто запустите код.

 var btn = document.querySelector('.btn');
var redObj = document.querySelector('.line');
var currentWidth = (redObj.offsetWidth / 33.6);
btn.addEventListener('click', () => {
  currentWidth  = 10;
  console.log(currentWidth);
  redObj.style.width = currentWidth   'px';
}); 
 .line {
  width: 30px;
  height: 30px;
  background-color: red;
} 
 <div class="line"></div>
<button class="btn">Increase</button>

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

1. При первом нажатии на кнопку вы берете ширину (30 пикселей), делите на 33,6 (= ~ 0,9), а затем добавляете 10. При этом ширина устанавливается равной ~10,9 пикселей.

Ответ №1:

Для начала это значение равно 30, поэтому при нажатии вы получаете размер 30/33 10.

Попробуйте это

 var btn = document.querySelector('.btn');
var redObj = document.querySelector('.line');

console.log(redObj.offsetWidth)
var currentWidth = redObj.offsetWidth;

btn.addEventListener('click', () => {
  currentWidth  = 10;
  console.log(currentWidth);
  redObj.style.width = currentWidth   'px';
}); 
 .line {
  width: 30px;
  height: 30px;
  background-color: red;
} 
 <div class="line"></div>
<button class="btn">Increase</button>

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

1. почему это 30/33 тхо. а что сделал Math.max()?

2. Для начала это 20, затем вы делите его на 33,6. Затем, когда вы нажимаете, вы добавляете 10 к этому числу. Так что вполне логично, что у вас меньшая ширина. Математический максимум не нужен

3. Для начала вам нужно объяснить нам, почему вы хотели разделить на 33,6