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

There are multiple function to do this work that wrote in bottom based on priority.

• .css()

Set one or more CSS properties for the set of matched elements.

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

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

• .show()

Display the matched elements and is roughly equivalent to calling .css("display", "block")

You can display element using .show() instead

$("div").show()

• .attr()

Set one or more attributes for the set of matched elements.

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

• JavaScript

You can add specific CSS property to element using pure javascript, if you don't want to use 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");