Javascript onclick，如何對某些元素使用不同的alpha？

在點擊事件變化，每列的背景顏色和它的作品。但是，我想要具有不同的（僅不透明）html身體背景顏色。現在它爲body.background（最後一行）提供與其他列相同的顏色。相反，我希望身體具有相同的顏色，但0.5不透明度，因此頂部具有不透明度1的元素會很好地突出。Javascript onclick，如何對某些元素使用不同的alpha？

function BackgroundColorChange(){ 
     // the main opacity level 
     var a = 1; 
     // some colors chosen for DOM elements backgrounds 
     var blue = 'rgba(51, 102, 153,'+a+')'; 
     var grey = 'rgba(66, 82, 102,'+a+')'; 
     var darkgreen = 'rgba(25, 102, 102,'+a+')'; 
     var lightgreen = 'rgba(62, 116, 89,'+a+')'; 
     var brown = 'rgba(96, 86, 57,'+a+')'; 
     var purple = 'rgba(66, 36, 51,'+a+')'; 

     var colorSelection = [blue, grey, darkgreen, lightgreen, brown, purple]; 

     // pick the random color for background as the event is clicked 
     var color = colorSelection[Math.floor(Math.random() * colorSelection.length)]; 

     // the elements i want to have 'opacity = 1' are selected here 
     var subsection = document.querySelectorAll(".childElement-column-photo, .childElement-sub-section, .sub-section, .modal-header, .modal-footer"); 

       for (var i = 0; i < subsection.length; i++) { 
         subsection[i].style.backgroundColor = color; 
       } 

     a = 0.5; //? ? ? ? ? 

     // I want this body element to have the same color but with 0.5 opacity 
     document.body.style.backgroundColor = color; 
}

我試圖在爲不透明度定義'a'時玩弄，但它沒有奏效。

HTML：這是我的HTML主要是如何標記。

<a onclick="BackgroundColorChange();" href="#">ChangeColor</a> 

    <body onload="setInterval(BackgroundColorChange(), 50000)"> 

    // there are many elements with this class name 
    <div class="childElement-column-photo">

來源

2017-09-15 Juozas Rastenis

可以置HTML的一點點請，只是想看看它是如何相互作用的。 – bhansa

你的'setInterval'調用實際上不起作用;你沒有傳遞任何東西。 – SLaks

在我看來是下最好的解決辦法：

嘗試將RGB顏色保存爲一個數組，並建立對飛你的CSS屬性。

function buildRgbaCSSProperty(color, alpha) { 
    return 'rgba(' + color[0] + ', ' + color[1] + ', ' + color[2] + ', '+ alpha + ')'; 
} 

function BackgroundColorChange(){ 
      // the main opacity level 
     var a = 1; 
     // some colors chosen for DOM elements backgrounds 
     var blue = [51, 102, 153]; 
     var grey = [66, 82, 102]; 
     var darkgreen = [25, 102, 102]; 
     var lightgreen = [62, 116, 89]; 
     var brown = [96, 86, 57]; 
     var purple = [66, 36, 51]; 

     var colorSelection = [blue, grey, darkgreen, lightgreen, brown, purple]; 

     // pick the random color for background as the event is clicked 
     var color = colorSelection[Math.floor(Math.random() * colorSelection.length)]; 

     // the elements i want to have 'opacity = 1' are selected here 
     var subsection = document.querySelectorAll(".childElement-column-photo, .childElement-sub-section, .sub-section, .modal-header, .modal-footer"); 

       for (var i = 0; i < subsection.length; i++) { 
         subsection[i].style.backgroundColor = buildRgbaCSSProperty(color, a); 
       } 

     a = 0.5; //? ? ? ? ? 

     // I want this body element to have the same color but with 0.5 opacity 
     document.body.style.backgroundColor = buildRgbaCSSProperty(color, a); 
}

來源

2017-09-15 18:07:40 Sysix

即使這是工作，我不明白這一行。 'return'rgba（'+ color [0] +'，'+ color [1] +'，'+ color [2] +'，'+ alpha +'）';' 從代碼我看它採取 'RGBA（' +藍+ ' '+灰色+'， '+深綠+'，' +阿爾法+ '）'; 沒有考慮顏色陣列，是不是應該將它們混合？它如何產生我想要的顏色？ –

你的顏色是一個有3個索引的數組。例如，我們採取藍色。你的'顏色[0]'是51，'顏色[1]'是102和'顏色[2]'是153從代碼的輸出是在末端：'RGBA（51，102，153，'+阿爾法+'）;'這和你的變量是一樣的字符串:) – Sysix

通過您正試圖設置a = 0.5你已經取得的顏色變量的時候，它們包含一個字符串，而不是到a變量的引用，所以他們不會改變。

你需要的不透明度值從顏色值的其餘部分分開，並在你遞給元素的背景色一次添加它。

var blue = '51, 102, 153,';

則可以將字符串保存爲這一點，然後當你設置樣式，通過在

'rgba(' + color + a +')'

來源

2017-09-15 18:09:50 DillGromble

您必須修改RGBA色的「阿爾法」渠道爲0.5你可以通過將逗號分隔的RGBA值分割成數組來實現。然後，您替換上一個值，然後再次將字符串重新組合在一起。

function BackgroundColorChange(){ 
 
     // the main opacity level 
 
     var a = 1; 
 
     // some colors chosen for DOM elements backgrounds 
 
     var blue = 'rgba(51, 102, 153,'+a+')'; 
 
     var grey = 'rgba(66, 82, 102,'+a+')'; 
 
     var darkgreen = 'rgba(25, 102, 102,'+a+')'; 
 
     var lightgreen = 'rgba(62, 116, 89,'+a+')'; 
 
     var brown = 'rgba(96, 86, 57,'+a+')'; 
 
     var purple = 'rgba(66, 36, 51,'+a+')'; 
 

 
     var colorSelection = [blue, grey, darkgreen, lightgreen, brown, purple]; 
 

 
     // pick the random color for background as the event is clicked 
 
     var color = colorSelection[Math.floor(Math.random() * colorSelection.length)]; 
 

 
     // the elements i want to have 'opacity = 1' are selected here 
 
     var subsection = document.querySelectorAll(".childElement-column-photo, .childElement-sub-section, .sub-section, .modal-header, .modal-footer"); 
 

 
       for (var i = 0; i < subsection.length; i++) { 
 
         subsection[i].style.backgroundColor = color; 
 
       } 
 

 
     // Split the rgba string into an array separated at the commas 
 
     var alpha = color.split(","); 
 
     
 
     // Change the last value to desired (the close parenthesis is needed) 
 
     alpha[3] = ".5)"; 
 
     
 
     // put elements back into a string 
 
     color = alpha.join(','); 
 
     
 
     // Test 
 
     console.log(color); 
 

 
     // I want this body element to have the same color but with 0.5 opacity 
 
     document.body.style.backgroundColor = color; 
 
} 
 

 
BackgroundColorChange();

來源

2017-09-15 18:13:31

Javascript onclick，如何對某些元素使用不同的alpha？

回答

相關問題