CSS 如何为分部元素设置不透明度级别

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

onclick事件只在用户点击元素时发生，它是一个纯粹的JavaScript属性。每当你点击onclick事件时，它就会做一些动作，如显示一条信息或将用户重定向到另一个页面。在网站中必须减少对onclick事件的使用，因为它可能给用户造成混乱。所以，要非常明智地使用这些事件。

语法

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

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

参数

number - 用于指定不透明度

例子

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

<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来改变分部元素的不透明度水平

按照下面给出的步骤，使用JavaScript来设置分部元素的不透明度级别。

第1步 - 让我们为HTML文档的标题和div元素定义样式，这将为div元素设置不透明度级别。对于h3元素，我们定义了颜色、font-weight、font-size和text-align。对于div元素，我们定义了text-align。

第2步 - 在正文部分，我们定义了标题、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属性来改变不透明度级别。