Во-первых, нет причины постоянно извлекать элемент на странице - назначьте его переменной один раз в начале, а затем ссылайтесь на эту переменную через ваши функции.
const box = document.getElementById('box');
Кроме того, при обновлении стилей элемента вы должны указывать определенный стиль c, который вы хотите изменить, а затем обновлять его напрямую
// Instead of this
document.getElementById("box").style = "height:250px; width:250px;
// Do this ( Also applying the above tip )
const box = document.getElementById('box');
box.style.height = '250px';
box.style.width = '250px';
Кнопка увеличения: я могу увеличить ее, но только один раз, не каждый раз, когда нажимается кнопка
Ваш код в настоящее время ничего не делает dynamici c - Вы просто устанавливаете его в жестко заданном размере. Вместо этого вы хотите получить текущий размер элемента, увеличить его, а затем присвоить это значение вашему элементу
. Вы можете использовать offsetHeight* 1024. * и offsetWidth для получения height / width элемента в виде числа для более простого добавления
let height = box.offsetHeight + 50; // Increasing the current size by 50
let width = box.offsetWidth + 50;
box.style.height = height + 'px'; // Assigning our increased size back to the box
box.style.width = width + 'px';
Синяя кнопка: я могу сделать ее синей при нажатии кнопки, но размер изменится на исходный, если кнопка увеличения была нажата первой.
Во всех ваших функциях вы перезаписываете все стили элемента box без причины. Если вы не перезаписываете стиль или не удаляете стиль, значения для каждого стиля останутся прежними. Когда вы обновляете backgroundColor, просто обновляйте backgroundColor.
box.style.backgroundColor = 'blue'; // This is all you need to change
Кнопка Fade: я нашел код для функции fadeOut на этом сайте (указан в коде), но я не знаю, как применить его к моему fadeBtn, поэтому окно исчезает сразу после открытия страница
Я немного озадачен тем, почему вы хотите, чтобы это применялось к блоку, как только страница загружается, несомненно, применяя этот стиль к блоку на Нажатие кнопки более уместно? Если это так, просто переместите вызов функции в обработчик click на кнопке
document.getElementById("fadeBtn").addEventListener("click", function() {
fadeOut(box, 2000);
});
Кнопка сброса: это работает! Не уверен, что код, который я использовал, чтобы заставить его работать, является подходящим способом, но в этот момент я возьму любую победу!
Да, но вам не нужно сбросить margin, потому что вы его никогда не меняете.
Кроме того, поскольку ваша функция fadeOut работает в режиме setInterval до тех пор, пока непрозрачность не станет равной 0, нам нужен способ получить доступ и отменить этот интервал или иначе элемент будет продолжать исчезать - для этого я переместил объявление outInterval за пределы функции, поэтому вы можете вызвать clearInterval(outInterval) внутри функции сброса (это более заметно в фрагменте кода внизу)
// Reset 'Grow'
box.style.height = '150px';
box.style.width = '150px';
// Reset 'Blue'
box.style.backgroundColor = 'orange';
// Reset 'Fade'
clearInterval(outInterval);
box.style.opacity = 1;
Вот фрагмент кода с этими изменениями, чтобы вы могли посмотреть, как это работает - не стесняйтесь задавать любые вопросы, если вы не уверены в чем-то, или я пропустил детали
const box = document.getElementById('box');
let outInterval = null;
document.getElementById("growBtn").addEventListener("click", function() {
let height = box.offsetHeight + 50;
let width = box.offsetWidth + 50;
box.style.height = height + 'px';
box.style.width = width + 'px';
});
document.getElementById("blueBtn").addEventListener("click", function() {
box.style.backgroundColor = 'blue';
});
document.getElementById("fadeBtn").addEventListener("click", function() {
fadeOut(box, 2000);
});
document.getElementById("resetBtn").addEventListener("click", function() {
// Reset 'Grow'
box.style.height = '150px';
box.style.width = '150px';
// Reset 'Blue'
box.style.backgroundColor = 'orange';
// Reset 'Fade'
clearInterval(outInterval);
box.style.opacity = 1;
});
function fadeOut(elem, speed) {
if (!elem.style.opacity) {
elem.style.opacity = 1;
} // end if
outInterval = setInterval(function() {
elem.style.opacity -= 0.02;
if (elem.style.opacity <= 0) {
clearInterval(outInterval);
} // end if
}, speed / 50);
};
<body>
<p>Press the buttons to change the box!</p>
<div id="box" class="box" style="height:150px; width:150px; background-color:orange; margin:25px"> . </div>
<button id="growBtn">Grow</button>
<button id="blueBtn">Blue</button>
<button id="fadeBtn">Fade</button>
<button id="resetBtn">Reset</button>
</body>