Home >Web Front-end >Front-end Q&A >How to modify the opacity attribute in jquery
How to modify the opacity attribute in jquery
- WBOYOriginal
- 2022-06-09 17:35:412478browse
In jquery, you can use the css() method to modify the opacity attribute of the element. This method is used to set or return the css attribute value of the element. The opacity attribute is used to set the opacity level of the element. The second parameter Just set it to the modified opacity attribute value, and the syntax is "$("specified element").css("opacity","modified opacity value")".
The operating environment of this tutorial: windows10 system, jquery3.4.1 version, Dell G3 computer.
How to modify the opacity attribute in jquery
The opacity attribute sets the opacity level of the element.
Syntax
opacity: value|inherit;
value specifies opacity. From 0.0 (fully transparent) to 1.0 (fully opaque).
css() method sets or returns one or more style attributes of the selected element.
To set the specified CSS property, please use the following syntax:
css("propertyname","value");The example is as follows:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("opacity","0.1");
});
});
</script>
<style>
p
{
opacity:0.8;
}
</style>
</head>
<body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>设置 p 元素的opacity</button>
</body>
</html>Output result:
Video tutorial recommendation: jQuery video tutorial
The above is the detailed content of How to modify the opacity attribute in jquery. For more information, please follow other related articles on the PHP Chinese website!