数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 设置 div 元素的不透明度？
style.opacity 属性用于设置元素的不透明度，并返回字符串值。此属性用于设置或返回不同 HTML 元素的不透明度。它是 HTML 样式不透明度属性之一。
onclick 事件仅在用户点击元素时发生，它是一个纯 JavaScript 属性。无论何时点击 onclick 事件，它都会执行一些操作，例如显示消息或将用户重定向到另一个页面。onclick 事件在网站中应该尽量少用，因为它可能会让用户感到困惑。因此，请谨慎使用此事件。
语法
以下是使用 JavaScript 设置不透明度级别的语法：
object.style.opacity = "number|initial|inherit"
参数
- 数字 - 用于指定不透明度
示例
在本例中，我们将使用 CSS 设置 div 元素的不透明度级别。
<html>
<head>
<style>
#content {
color: blue;
font-weight: lighter;
font-size: 20px;
text-align: center;
}
#op{
opacity: 0.3;
text-align: center;
}
</style>
</head>
<body>
<h2>Setting the opacity level for division element using the CSS</h2>
<h3 id="content">Tutorial Point</h3>
<div id="op">
Example program for the Opacity Level
</div>
</body>
</html>
使用 JavaScript 更改 div 元素的不透明度级别
请按照以下步骤使用 JavaScript 设置 div 元素的不透明度级别：
步骤 1 - 让我们为 HTML 文档的标题和 div 元素定义样式，它将设置 div 元素的不透明度级别。对于 h3 元素，我们定义了颜色、字体粗细、字体大小和文本对齐方式。对于 div 元素，我们定义了文本对齐方式。
步骤 2 - 在 body 部分下，我们定义了标题、div、按钮和脚本元素。
步骤 3 - 对于按钮元素，定义了 opacityFun() 方法。使用此方法将更改不透明度级别。
步骤 4 - 在 opacityFun() 方法中，明确指出了应执行方法功能的 id。
步骤 5 - style opacity 属性是 HTML DOM 属性，用于设置不透明度级别。
步骤 6 - 点击按钮后，将触发 onClick 事件函数，并为 div 元素设置不透明度。
示例
在本例中，我们将使用 JavaScript 设置 div 元素的不透明度级别。
<html>
<head>
<style>
.heading {
color: violet;
font-weight: bolder;
font-size: 18px;
text-align: center;
}
#div1 {
text-align: center;
}
</style>
</head>
<body>
<h2>Setting the opacity level for division element using the JavaScript</h2>
<h3 class="heading">Tutorix</h3>
<div id="div1">
Example program for the Opacity Level
</div>
<br></br>
<button type="button" onclick="opacityFun()">
Click Here to set the opacity
</body>
<script>
function opacityFun() {
document.getElementById("div1").style.opacity = "0.2";
}
</script>
</html>
结论
在本文中，我们演示了如何设置 div 元素的不透明度级别以及示例。我们在这里看到了两个不同的示例，在第一个示例中，我们使用简单的 CSS 设置了 div 元素的不透明度级别。在第二个示例中，我们使用 JavaScript 更改了 div 元素的不透明度级别。在这里，我们使用了 onclick 事件和 style opacity 属性来更改不透明度级别。
175 次浏览
