Jquery style display none: javascript — How to set «style=display:none;» using jQuery’s attr method?

Содержание

Как отображать ничего важного с помощью jquery

У меня есть div, который является блоком отображения (получение стиля через jquery), и теперь я хочу, чтобы он не отображался, когда пользователь нажимает на него только для просмотра планшета и мобильного устройства. Поэтому я использовал attr(‘style’,’display: none !important’). Но он принимает блок отображения по умолчанию. Есть ли какое-то решение, чтобы преодолеть это…..

26 сен ’14 #1

2 8063

Войдите, чтобы опубликовать свой ответ, или Зарегистрируйте бесплатную учетную запись.

Как скрыть и показать элементы DOM с помощью JavaScript Элементы OM в ванильном JavaScript. В этой статье мы рассмотрим два способа скрыть или отобразить элементы DOM с помощью JavaScript.

Скрытие и отображение элементов с помощью CSS

Свойство display

Свойство style display используется для установки и получения типа отображения элемента в JavaScript.

Большинство элементов HTML имеют тип отображения встроенный или блочный . Содержимое встроенного элемента перемещает слева и справа от него. Блочные элементы HTML отличаются тем, что они *заполняют* всю строку и не отображают содержимое по бокам.

Чтобы скрыть элемент, установите для свойства display значение none :

 document.querySelector('.btn').style.display = 'none'

Чтобы отобразить элемент, установите для свойства display значение block (или любое другое значение, кроме

none ):

 document.querySelector('.btn').style.display = 'block'

Скрытие и отображение элементов с помощью свойства CSS

видимости

Другой способ показать или скрыть элементы DOM в JavaScript — использовать стиль видимость свойство. Это похоже на приведенное выше свойство display . Однако, если вы установите display: none , он скроет весь элемент из DOM. visibility:hidden скрывает содержимое элемента, а HTML-элемент остается в своем исходном положении и размере.

Чтобы скрыть элемент, установите для свойства visibility значение hidden

 document.querySelector('.btn').style.visibility = 'hidden'

Чтобы снова отобразить элемент, установите visibility свойство to visible как показано ниже:

 document.querySelector('.btn').style.visibility = 'visible'

Свойство стиля видимость только скрывает элемент, но не удаляет пространство, занимаемое элементом. Если вы также хотите удалить пробел, установите display: none , используя свойство display .

Создание методов

show() и hide()

jQuery предоставляет hide() , show() и toggle() служебные методы, которые используют встроенные стили для обновления

свойства отображения элемента.

Давайте воспользуемся свойством в стиле для создания вышеуказанных методов jQuery в ванильном JavaScript:

 // скрыть элемент
константа скрыть = элемент => {
  элемент.style.display = 'нет'
}
// показать элемент
константное шоу = элемент => {
  elem.style.display = 'блок'
}
// переключаем видимость элемента
константный переключатель = элемент => {
  // если элемент виден, скрыть его
  если (window.getComputedStyle(elem).display !== 'none') {
    скрыть (элемент)
    возвращаться
  }
  // показываем элемент
  шоу (элемент)
}

Теперь, чтобы скрыть или показать любой элемент DOM, используйте описанные выше методы:

 // скрыть элемент
скрыть (document.querySelector ('.btn'))
// показать элемент
показать (document.querySelector ('.btn'))
// переключить видимость
переключить (document.querySelector ('.btn'))

Обратите внимание на использование метода getComputedStyle() , который мы только что изучили на днях, для проверки того, виден ли уже элемент.

Мы использовали этот метод, потому что свойство стиля имеет дело только со встроенными стилями, указанными с помощью

элемента.0173 атрибут стиля . Но HTML-элемент можно скрыть с помощью встроенного элемента

Jquery style display none: javascript — How to set «style=display:none;» using jQuery’s attr method?

Как отображать ничего важного с помощью jquery

Похожие темы

Скрытие и отображение элементов с помощью CSS

Скрытие и отображение элементов с помощью свойства CSS

Создание методов