Использование JavaScript для удаления div в размере экрана ниже определенного пикселя
Я новичок в кодировании. Я знал, что это можно сделать с помощью css, но хотел сделать это с помощью JavaScript. У меня есть тег div, и я не хотел бы показывать его при размере экрана 630 пикселей. Я искал этот сайт и нашел этот код JavaScript в другом вопросе, и он мне понравился:
if ( window.innerWidth > 630 ) {
//Your Code
}
Но, поскольку я новичок, я не знаю, как вставить его в мой PHP-код и куда вставить div, поэтому он работает только для экрана выше 630 пикселей.
Вы не можете вставить код PHP в JavaScript. PHP работает на сервере. JavaScript работает в веб-браузере. Они ни в какой работе не работают вместе. Это то, что вы ДОЛЖНЫ делать с помощью CSS. Делать это в JavaScript просто неправильно. JavaScript предназначен не для этого. Именно для этого и нужен медиа-запрос в CSS.
Я не хочу вставлять PHP в код JavaScript. Просто тег div, внутри которого нет PHP-кода.
если ваш javascript работает, вы можете сделать 2 вещи. измените > на это < или сделайте оператор else, где он скрывает div
@Smith, проверь мой ответ, это сработает для тебя
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вот способ скрыть div, когда ширина экрана меньше 700 пикселей.
function myFunction(x) {
if (x.matches) { // If media query matches
document.getElementById("divIWantedToHide").style.visibility = "hidden";
} else {
document.getElementById("divIWantedToHide").style.visibility = "visible";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction)<div id = "divIWantedToHide">
tset
</div>Лично я бы порекомендовал вам использовать CSS для более точных медиа-запросов.
@media only screen and (max-width: 700px) {
#divIWantedToHide {
display: none;
}
}<div id = "divIWantedToHide">
tset
</div>Как вы предложили, я использовал метод CSS, и он работал проще, чем я думал раньше.
Я счастлив, что смог помочь вам! Да, медиа-запросы очень просты в освоении. Вы всегда можете скопировать первую строку и поместить туда остальную часть своего css для мобильных устройств.
Это скорее проблема event:
На базовом уровне вы можете переключаться с помощью resizeevent следующим образом:
var el = document.getElementById("yes"); //get the element node
//target resize event
window.onresize = function(){
//this will check everytime a resize happens
if (window.innerWidth > 630)
{
//if width is still bigger than 630, keep the element visible
el.style.display = "block";
//exit the funtion
return;
}
//At this point, the width is less than or equals to 630, so hide the element
el.style.display = "none";
}<div id = "yes">
Yey! I am visible
</div>
Возможный дубликат Скрытие DIV при использовании мобильного браузера