How to add `style=display:“block”` to an element using jQuery?
The task is to add style=display: “block” to an element with the help of jQuery.
- There are multiple function or method to do this work, these are as follows:
- .css(): Set one or more CSS properties for the set of matched elements.
Syntax:$("div").css("display", "block")
- .show(): Display the matched elements and is roughly equivalent to calling .css(“display”, “block”).
Syntax:$("div").show()
- .attr(): Set one or more attributes for the set of matched elements.
Syntax:
$("div").attr("style", "display:block")
Example 1: Using .css() Method
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < title > How to add `style=display:“block”`to an element using jQuery? </ title > < style > p { color: green; font-weight: bold; cursor: pointer; } </ style > </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < h2 > Using .css()</ h2 > < div > How to add < p >`style=display:“block”` </ p > to an element using jQuery? </ div > < script > var words = $("p").first().text().split(/\s+/); var text = words.join("</ span > < span >"); $("p").css("display", "block"); </ script > </ body > </ html > |
chevron_right
filter_none
Output:
Example 2: Using .attr() Method
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < title > How to add `style=display:“block”` to an element using jQuery? </ title > < style > p { color: green; font-weight: bold; cursor: pointer; } </ style > </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < h2 > Using .attr()</ h2 > < div > How to add < p >`style=display:“block”`</ p > to an element using jQuery? </ div > < script > var words = $("p").first().text().split(/\s+/); var text = words.join("</ span > < span >"); $("p").attr("style", "display:block") </ script > </ body > </ html > |
chevron_right
filter_none
Output:
Example 3: Using .show() Method
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < title >How to add `style=display:“block” `to an element using jQuery?</ title > < style > p { color: green; font-weight: bold; cursor: pointer; } </ style > </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < h2 > Using .show()</ h2 > < div > How to add < p >`style=display:“block”`</ p > to an element using jQuery? </ div > < script > var words = $("p").first().text().split(/\s+/); var text = words.join("</ span > < span >"); $("div").show(); </ script > </ body > </ html > |
chevron_right
filter_none
Output: