#javascript #html #css #dom
#javascript #HTML #css #dom
Вопрос:
Итак, у меня есть папка, полная кучи GIF-файлов, которые я хочу использовать в качестве фона для нескольких элементов на моей странице. У меня есть анимация двери для всех этих элементов, и я хочу, чтобы один из случайных GIF-файлов отображался, когда дверь открыта. Раньше я просто использовал одно изображение для всех элементов, подобных этому:
HTML
<div class="door-position d1">
<div class="door-back">
<button class="door" data-date="11/01/2020">1</button>
</div>
</div>
CSS
.door-back {
height: 65px;
width: 65px;
border-radius: 50px;
background-image: url("https://media4.giphy.com/media/8AdyAfsTMKi9QMaQ6n/giphy.gif");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Но мне было интересно, есть ли innerHTML для вашей страницы css или я должен просто подключить их непосредственно к моему HTML?
Если это так, будет ли мой приведенный выше стиль по-прежнему влиять на это изображение? (высота, ширина, размер и т.д.)
ПРИМЕЧАНИЕ: дверь преобразуется (открывается), чтобы показать изображение в свойстве door-back.
Это был JS, который я пытался реализовать, чего бы он ни стоил. В этой версии я просто попытался указать адреса изображений в файле JS прямо:
HTML
<div class="door-position d1">
<div class="door-back" >
<button class="door" onClick="displayImg()" data-date="11/01/2020">1</button>
</div>
</div>
JS
const doorBackImg = document.querySelectorAll(".door-back");
const imgArr = [
"https://media0.giphy.com/media/r3jTnU6iEwpbO/200w.webp?cid=ecf05e47gf4jebecm9mhvyym9jgx01lmfl6xd3gesmmmhi6iamp;rid=200w.webp",
"https://media4.giphy.com/media/phmwMLY1kkkMg/200w.webp?cid=ecf05e47gf4jebecm9mhvyym9jgx01lmfl6xd3gesmmmhi6iamp;rid=200w.webp",
"https://media0.giphy.com/media/bnH2hkYp97rGM/200.webp?cid=ecf05e478lhuvbydmjxp51r50rufqjcxj2x1v0g6kug4o86samp;rid=200.webp",
];
function displayImg() {
let randNum = Math.floor(Math.random() * imgArr.length);
doorBackImg.innerHTML = `${imgArr[randNum]}`;
}
Если вам нужен еще какой-либо код или информация, пожалуйста, дайте мне знать! Я пока не совсем нашел то, что искал, и ничего из того, что я пробовал, не сработало.
Приветствия!
Комментарии:
1. Что вы имеете в виду, говоря «если для вашей страницы css есть innerHTML или я должен просто подключить их непосредственно к моему HTML»
2. В настоящее время у меня есть адрес изображения в моем файле CSS, в свойстве background-image. Есть ли какой-либо способ получить доступ к этому свойству фонового изображения в CSS или я должен просто отправить изображение в HTML-файл вместо этого? Прошу прощения за отсутствие у меня здесь правильного языка; не уверен, как еще это сформулировать. Спасибо!
3. Вы можете напрямую управлять свойством. Это включено
element.style.backgroundImage. Вы это имеете в виду?4. Проверьте это w3schools.com/jsref/prop_style_backgroundimage.asp
5. Да! Это выглядит примерно так. Итак, из нее я предполагаю, что это что-то вроде « function myFunction() { document.getElementById(«myDiv»).style.BackgroundImage = «url(‘ media0.giphy.com/media/r3jTnU6iEwpbO /… )»; } «Будет ли это изменяться настройками, которые у меня есть для этого класса в CSS? Похоже, они делают большинство встроенных вещей, чего я бы хотел избежать, если это возможно. В любом случае, я еще немного повозлюсь с этим, но пока спасибо за комментарии!
Ответ №1:
Я не уверен, что правильно вас понял, но вот одно из моих решений. Это работает для одной двери.
const doorBackImg = document.querySelector("#door-back");
const imgArr = [
"https://media0.giphy.com/media/r3jTnU6iEwpbO/200w.webp?cid=ecf05e47gf4jebecm9mhvyym9jgx01lmfl6xd3gesmmmhi6iamp;rid=200w.webp",
"https://media4.giphy.com/media/phmwMLY1kkkMg/200w.webp?cid=ecf05e47gf4jebecm9mhvyym9jgx01lmfl6xd3gesmmmhi6iamp;rid=200w.webp",
"https://media0.giphy.com/media/bnH2hkYp97rGM/200.webp?cid=ecf05e478lhuvbydmjxp51r50rufqjcxj2x1v0g6kug4o86samp;rid=200.webp",
];
function displayImg() {
let randNum = Math.floor(Math.random() * imgArr.length);
doorBackImg.style.backgroundImage = `url(${imgArr[randNum]})`;
} .door-back {
height: 65px;
width: 65px;
border-radius: 50px;
background-image: url("https://media4.giphy.com/media/8AdyAfsTMKi9QMaQ6n/giphy.gif");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
} <div class="door-position d1">
<div id="door-back" class="door-back">
<button onClick="displayImg()" class="door" data-date="11/01/2020">1</button>
</div>
</div> Комментарии:
1. Спасибо за ваш комментарий! Это работает очень хорошо! У меня есть 25 дверей, которые открываются на основе реквизита даты, который у меня есть в JS, и эти GIF-файлы должны быть фоном каждой двери. Идея в том, что они будут заполняться либо при загрузке страницы, ЛИБО при запуске события DoorOpen (я могу это понять). Я просто не был уверен, как заставить все 25 дверей размещать на них случайное изображение каждый раз. То, как вы это написали, может просто сработать! Я просто помещу все 25 случайных gif-файлов в массив в JS; поскольку я понятия не имею, как извлекать из своих собственных документов, еще раз спасибо!
2. Рад вам помочь
3. Спасибо! Я попробовал это, не создавая ID для doorback, так как я хотел, чтобы это касалось всех элементов door (давая всем индивидуальное случайное изображение bg). Это ОТЛИЧНО работает для первой двери. Происходит событие DoorOpen, и gif отображается прямо за ним. Однако, если вы нажмете на вторую дверь, после события DoorOpen ничего не заполняется, а первый отображаемый gif затем рандомизируется. Есть идеи, как я могу это исправить и добавить это свойство к каждой двери не повторять рандомизацию? ПРИМЕЧАНИЕ: для событий указателя установлено значение «нет», поэтому, как только дверь открыта, она больше не может взаимодействовать. Это так близко!
4. Конечно! Извините, там много кода, и у меня есть только случайное изображение, отображаемое на первых двух дверях для записи. Кроме того, JS также находится прямо вверху страницы! Я знаю, что это спагетти, так что, надеюсь, со всем, что находится вверху, его будет легко найти. Дайте мне знать, если вы заблудились, лол jsfiddle.net/37wavfkL
5. Это фантастика! Я не слишком много работал с циклами for (думаю, я буду использовать forEach для большинства вещей), но это удобно, чтобы увидеть, как все это работает. У меня осталось меньше недели, чтобы это сделать, и это было последним большим препятствием для меня. Еще раз спасибо за вашу помощь; Я действительно очень ценю это!