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

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

javascript html css

Javascript onclick，如何对某些元素使用不同的alpha？,javascript,html,css,Javascript,Html,Css,单击事件会更改每列的背景色，并且会正常工作。但是有一个html主体背景颜色，我想有不同的（只有不透明度）。现在，它为body.background（最后一行）提供了与其他列相同的颜色。相反，我希望主体具有相同的颜色，但不透明度为0.5，因此顶部的元素，不透明度为1，将非常突出 function BackgroundColorChange(){ // the main opacity level var a = 1; // some colors c

单击事件会更改每列的背景色，并且会正常工作。但是有一个html主体背景颜色，我想有不同的（只有不透明度）。现在，它为body.background（最后一行）提供了与其他列相同的颜色。相反，我希望主体具有相同的颜色，但不透明度为0.5，因此顶部的元素，不透明度为1，将非常突出

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;
}

函数BackgroundColorChange（）{
//主不透明度级别
var a=1；
//为DOM元素背景选择的一些颜色
var blue=‘rgba（51102153，’+a+’）；
灰色变量='rgba（66,82,102，+a+'）'；
var darkgreen='rgba（25102102，+a+'）；
var lightgreen='rgba（62116,89，'+a+'）'；
var brown=‘rgba（96,86,57，’+a+’）；
紫色变种='rgba（66,36,51，'+a+'）'；
var colorSelection=[蓝色、灰色、深绿色、浅绿色、棕色、紫色]；
//单击事件时为背景选择随机颜色
var color=colorSelection[Math.floor（Math.random（）*colorSelection.length）]；
//我想要“不透明度=1”的元素在这里被选中
var subsection=document.queryselectoral（“.childElement列照片、.childElement子节、.subsection、.modal页眉、.modal页脚”）；
对于（变量i=0；i


我试着在定义不透明性的“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">


//有许多元素具有此类名
在我看来，以下是最佳解决方案：
尝试将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);
}

函数buildrgbacsproperty（颜色，alpha）{
返回'rgba（'+color[0]+'、'+color[1]+'、'+color[2]+'、'+alpha+'）；
}
函数BackgroundColorChange（）{
//主不透明度级别
var a=1；
//为DOM元素背景选择的一些颜色
var blue=[51102153]；
灰色变量=[66,82,102]；
var darkgreen=[25102102]；
var lightgreen=[62116,89]；
var brown=[96,86,57]；
紫色变量=[66,36,51]；
var colorSelection=[蓝色、灰色、深绿色、浅绿色、棕色、紫色]；
//单击事件时为背景选择随机颜色
var color=colorSelection[Math.floor（Math.random（）*colorSelection.length）]；
//我想要“不透明度=1”的元素在这里被选中
var subsection=document.queryselectoral（“.childElement列照片、.childElement子节、.subsection、.modal页眉、.modal页脚”）；
对于（变量i=0；i
当您试图设置a=0.5
时，您已经创建了颜色变量，它们包含字符串，而不是对a
变量的引用，因此它们不会更改
您需要将“不透明度”值与其他颜色值分开，并在将其添加到元素的背景色时将其添加
   var blue = '51, 102, 153,';

您可以将字符串保存为这样，然后在设置样式时传入
'rgba（'+color+a+'）”
您必须将rgba颜色的“alpha”通道修改为.5，您可以通过在逗号处将rgba值拆分为一个数组来实现。然后，替换最后一个值，然后重新组合字符串

函数BackgroundColorChange（）{
//主不透明度级别
var a=1；
//为DOM元素背景选择的一些颜色
var blue=‘rgba（51102153，’+a+’）；
灰色变量='rgba（66,82,102，+a+'）'；
var darkgreen='rgba（25102102，+a+'）；
var lightgreen='rgba（62116,89，'+a+'）'；
var brown=‘rgba（96,86,57，’+a+’）；
紫色变种='rgba（66,36,51，'+a+'）'；
var colorSelection=[蓝色、灰色、深绿色、浅绿色、棕色、紫色]；
//单击事件时为背景选择随机颜色
var color=colorSelection[Math.floor（Math.random（）*colorSelection.length）]；
//我想要“不透明度=1”的元素在这里被选中
var subsection=document.queryselectoral（“.childElement列照片、.childElement子节、.subsection、.modal页眉、.modal页脚”）；
对于（变量i=0；i背景颜色变化（）
你能发布一点html吗，只是想看看它是如何相互作用的。你的setInterval
调用实际上不起作用；你没有通过任何东西。即使这是工作，我不明白这条线<代码>返回'rgba（'+color[0]+'、'+color[1]+'、'+color[2]+'、'+alpha