How to add `style=display:”block”` to an element using jQuery?

Problem

In jQuery, how do I apply style=display:”block” to an element?

Asked by Someone

Solution #1

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

You may also do this, as Dave Thieben points out in his comment below:

$("#YourElementID").css({ display: "block" });

Answered by Colin Brock

Solution #2

There are several functions to complete this task, which are listed in order of priority at the bottom.

For the collection of matching elements, set one or more CSS properties.

$("div").css("display", "block")

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

This is approximately comparable to calling to display the matching components. CSS (Cascading Style Sheets) (“display”, “block”)

Instead, you can use.show() to display the element.

$("div").show()

For the collection of matching elements, set one or more characteristics.

If target element hasn’t style attribute, you can use this method to add inline style to element.

$("div").attr("style", "display:block")

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

If you don’t want to utilize jQuery, you can apply particular CSS properties to elements using pure javascript.

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");

Answered by Mohammad

Solution #3

You might want to look at depending on why you’re changing the show property.

$("#yourElementID").show()

and

$("#yourElementID").hide()

Answered by Design by Adrian

Solution #4

If you need to add more than one, follow these steps:

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

Because most styles include a dash, I would also put the property name between quotes to allow for the dash. Quotes are optional if the keyword is ‘display,’ but if the keyword is ‘dash,’ it will not operate without them. Anyway, to keep things easy, always put them in quotes.

Answered by CodingYoshi

Post is based on https://stackoverflow.com/questions/3269136/how-to-add-style-displayblock-to-an-element-using-jquery