資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
