CSS 如何设置分割元素的不透明度水平

style.opacity属性用于设置元素的不透明度，并返回字符串值。这些属性用于设置或返回不同HTML元素的不透明度。这是HTML样式不透明度属性之一。

onclick事件仅在用户点击元素时发生，它是一个纯粹的JavaScript属性。当你点击onclick事件时，它会执行一些操作，如显示一条消息或将用户重定向到另一个页面。网站中应当尽量少使用onclick事件，因为它可能会让用户感到困惑。因此，要明智地使用这些事件。

语法

以下是使用JavaScript设置不透明度水平的语法-

object.style.opacity = "number|initial|inherit"

参数

number - 用于指定透明度

示例

在这个示例中，我们将使用CSS为一个 division 元素设置透明度级别。

<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改变division元素的透明度级别

按照以下步骤使用JavaScript设置division元素的透明度级别：

步骤1 - 让我们定义HTML文档中标题和div元素的样式，以设置div元素的透明度级别。对于h3元素，我们定义了颜色、字重、字体大小和文本对齐方式。对于div元素，我们定义了文本对齐方式。

步骤2 - 在body部分下，我们定义了标题、div、按钮和脚本元素。

步骤3 - 对于按钮元素，定义了opacityFun()方法。使用此方法可以改变透明度级别。

步骤4 - 在opacityFun()方法中，明确指定了要执行方法功能的id。

步骤5 - 导致样式透明度属性的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属性来更改透明度级别。