Как добавить `style = display:“ block ”` к элементу, используя jQuery?

Ответы:

346
$("#YourElementID").css("display","block");

Изменить: или, как указывает Дейв Тибен в своем комментарии ниже, вы также можете сделать это:

$("#YourElementID").css({ display: "block" });
Колин Брок
источник
21
или.css({ display: "block" });
Дэйв Тибен
8
@dave - или .css({ "display": "block" });просто замкнуть любые проблемы, вызванные displayпеременной. - JSLint отклонит версию без кавычек. ( github.com/douglascrockford/JSLint/issues/110 )
Питер Айтай
Назначение Json-esque полезно для отправки по трубам. Мне это нравится.
Луис Роблес
35

В зависимости от цели установки свойства отображения, вы можете взглянуть на

$("#yourElementID").show()

и

$("#yourElementID").hide()
Дизайн Адриан
источник
29

Есть несколько функций для выполнения этой работы, которые написаны снизу в зависимости от приоритета.

Установите одно или несколько свойств CSS для набора соответствующих элементов.

$("div").css("display", "block")
// Or add multiple CSS properties
$("div").css({
  display: "block",
  color: "red",
  ...
})

Отображение соответствующих элементов и примерно эквивалентно вызову.css("display", "block")

Вы можете отобразить элемент, используя .show()вместо

$("div").show()

Установите один или несколько атрибутов для набора соответствующих элементов.

Если целевой элемент не имеет styleатрибута , вы можете использовать этот метод для добавления встроенного стиля к элементу.

$("div").attr("style", "display:block")
// Or add multiple CSS properties
$("div").attr("style", "display:block; color:red")

  • JavaScript

Вы можете добавить определенное свойство CSS к элементу, используя чистый JavaScript , если вы не хотите использовать jQuery.

var div = document.querySelector("div");
// One property
div.style.display = "block";
// Multiple properties
div.style.cssText = "display:block; color:red"; 
// Multiple properties
div.setAttribute("style", "display:block; color:red");
Мохаммад
источник
11

Если вам нужно добавить несколько, то вы можете сделать это так:

$('#element').css({
    'margin-left': '5px',
    'margin-bottom': '-4px',
    //... and so on
});

В качестве хорошей практики я бы также поместил имя свойства между кавычками, чтобы разрешить тире, поскольку в большинстве стилей есть тире. Если это было «отображение», то кавычки не являются обязательными, но если у вас есть тире, он не будет работать без кавычек. В любом случае, чтобы было проще: всегда заключайте их в кавычки.

CodingYoshi
источник