Менять отображение элемента через Javascript?
Я был перенаправлен на эту страницу, так как я задал тот же вопрос и не нашел ответа.
Глядя на принятый ответ, я не совсем согласен, но это позволяет мне понять что делать. (Я даже не говорю о метании и исключении, которое не имеет смысла).
Реальный вопрос на самом деле заключается в том, чтобы задаться вопросом, кто будет получателем сообщений об ошибках? : Автор, который имеет право опубликовать сообщение или страницу.
Итак, это не админ, и этот ошибочный код не будет выпущен.
Это сообщение об ошибке должно появиться, когда издатель, пишущий короткий код на своей странице / посту, неправильно использует его. Фактически, во время предварительного просмотра. Если ошибка регистрируется в журнале php без пауз, пользователь может даже не знать, что он существует! Он может заключить, что плагин не работает и удалит его. Я думаю, что это не желаемая цель.
Итак, я считаю, что лучшим решением является печать ошибки на подготовленной странице.
Как я вижу, ответ датируется 2014 годом, и ничего не было задокументировано, поскольку на странице https://developer.wordpress.org/plugins/the-basics/best-practices/ я думаю, что он может заслужить небольшое добавление.
2 ответа
Проблема здесь в том, что element.style.display обращается к свойству встроенного стиля, чтобы получить свойство, примененное к элементу. Вы можете использовать функцию getComputedStyle
function ToggleSearchBar() {
var searchbar = document.getElementById("SearchBar");
var display = getComputedStyle(searchbar).display;
if (display == "none") {
searchbar.style.display = "block";
} else {
searchbar.style.display = "none";
}
}.search-button form {
display: none;
padding-top: 10px;
}<div class = "search-button">
<p onclick = "ToggleSearchBar()">Search</p>
<form id = "SearchBar">
<input type = "text" placeholder = "Your query here">
</form>
</div> и вы должны использовать display block вместо пустой строки, так как у вас есть декларация css none.
Это потому, что когда вы устанавливаете display="", он будет использовать свой стиль CSS, который none. Вы должны изменить отображение на block.
Для hide / show я бы предложил вам использовать Тернарный оператор
function ToggleSearchBar() {
var searchbar = document.getElementById("SearchBar");
if(searchbar.style.display === '') searchbar.style.display = 'block'
else searchbar.style.display = searchbar.style.display === 'none' ? 'block' : 'none'
}.search-button form {
display: none;
padding-top: 10px;
}<div class = "search-button">
<p onclick = "ToggleSearchBar()">Search</p>
<form id = "SearchBar">
<input type = "text" placeholder = "Your query here">
</form>
</div>