极客教程如何用jQuery为一个元素添加style=display:block
任务是在jQuery的帮助下为一个元素添加style=display:”block “到一个元素上，借助于jQuery。
有多种功能或方法来做这项工作，具体如下。
- .css()。为匹配的元素集合设置一个或多个CSS属性。
语法:
$("div").css("display", "block")
- .show()。显示匹配的元素，大致等同于调用.css(“display”, “block”)。
语法:
$("div").show()
- .attr()。为匹配的元素集设置一个或多个属性。
语法:
$("div").attr("style", "display:block")
例子1：使用.css()方法
<!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 src="https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2> Using .css()</h2>
<div>
How to add
`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>
输出:
例子2：使用.attr()方法
<!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 src="https://code.jquery.com/jquery-1.10.2.js">
</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>
输出:
例子3：使用.show()方法
<!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 src="https://code.jquery.com/jquery-1.10.2.js">
</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”`
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>
输出:
jQuery是一个开源的JavaScript库，它简化了HTML/CSS文档之间的交互，它以其 “少写多做 “的理念而广为人知。