爲什麼opacity沒有在javascript中設置

-1

我已經完成程序來創建彈出div區塊。因爲我用四個輸入標籤創建了div塊。我在它的後面添加了一個body標籤。然後我嘗試爲除了這個div標籤以外的其他物體制作不透明視圖。爲什麼opacity沒有在javascript中設置

所以，我想這個

document.body.style="opacity:0.3"; 
document.getElementById("div_block").style="opacity:1";

不透明度div_block正確設置它顯示的不透明度的值是1 但在網頁中的不透明度是影響div_block也。如何避免這種情況？

來源

2016-08-03 vaishali

'.style.cssText = 「不透明度：0.3」'或'.style.opacity =「0.3」' –

請顯示您的（「* [mcve] *'）代碼。順便說一句，從你的描述中，聽起來你正在向頁面添加另一個''元素，如果你不*，每個文檔只能有一個正文元素。另外：不透明是遺傳的，孩子不能比其祖先更不透明。 –

正如Jaromanda所說，「style」是一個對象，而不是一個字符串。 – slebetman

由於您的彈出窗口是body的子項，因此會受到其不透明度的影響。

爲了避免這種情況，通常你會放置一個div用100％的寬度和100％的高度高於一切但您的彈出，並給它一個部分透明的背景（如：rgba(255, 255, 255, 0.5)）。

來源

2016-08-03 10:17:05 mjsarfatti

因爲你的語法是錯誤的：

document.body.style.opacity='0.3'; 
document.getElementById("div_block").style.opacity='0.3';

來源

2016-08-03 10:17:23 jonju

設置不透明度後，我通過getPropertyValue函數檢查了標籤的不透明度的值。它返回我設定的值。所以如果語法錯誤，那麼getPropertyValue函數如何爲div_block返回一個不透明度值1。 – vaishali

出現這種情況，因爲div_block元素是body元素的後裔，是由opacity:0.3;聲明影響視圖層的一部分。

的body的不透明度值實際上是「基線」用於計算div_block的透明度...

來源

2016-08-03 10:17:56

-1

的問題是，內body一切都將繼承您設置的任何樣式。

爲什麼使用body而不僅僅是100％的高度和寬度div？如果您使用div方法，您可以分離這兩個元素，它們不會相互繼承樣式。

示例HTML：

<div id="container"></div>

<div id="div_block"></div>

例JS：

document.getElementById("container").style="opacity:0.3"; document.getElementById("div_block").style="opacity:1";

來源

2016-08-03 10:22:16

我想彈出div標籤。 – vaishali

你是什麼意思？像一個模式？是的，那仍然可以工作。 –

如果你申請的透明度父元素，則其子元素也將得到影響。以避免現在必須覆蓋現有元素，而不是將透明度應用於要應用於某個容器和要覆蓋該容器之外的元素的物體。我沒有包含的JavaScript但它會做同樣的

也很document.body.style.opacity = "0.3";

我創造了這個fiddle爲您瞭解

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>text</title> 
    <style type="text/css" media="screen"> 
     .container{ 
      opacity: 0.3; 
      background: yellow; 
      height:400px; 
      width:100%; 
     } 

     .over-lay{ 
      position:relative; 
      bottom:250px; 
      background: red; 
      width:150px; 
      height: 150px; 
      margin:0 auto; 

     } 

     .container>div{ 
      background: purple; 
      width:200px; 
      margin:50 auto; 

     } 
    </style> 

</head> 
<body> 
    <div class="container"> 
     This is container 
     <div>Another container</div> 
    </div> 
    <div class="over-lay"> 
     This is over-lay 
    </div> 
</body> 
</html>

來源

2016-08-03 10:33:16 owaishanif786

我創建動態，所以我需要它在JavaScript中.. – vaishali

爲什麼opacity沒有在javascript中設置

回答

相關問題