如何使用 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 属性来更改不透明度级别。

更新于：2023年2月24日

175 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告