Question

点击事件会更改每列的背景颜色并且有效。但是我想要有不同的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;
}

我试图在为不透明度定义'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">

Answer 1

在我看来，以下是最佳解决方案：

尝试将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);
}

Answer 2

当您尝试设置a = 0.5时，您已经创建了颜色变量，并且它们包含一个字符串，而不是对a变量的引用，因此它们不会更改。 / p>

您需要将不透明度值与颜色值的其余部分分开，并在将其处理为元素的背景颜色时将其添加。

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

您可以将字符串保存为此，然后在设置样式时传入

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

Answer 3

您必须将RGBA颜色的“alpha”通道修改为.5，您可以通过将逗号中的RGBA值拆分为数组来实现。然后，替换最后一个值，然后再将字符串重新组合在一起。

$cur_group_id = 0;
$members = [];
$symbol = '';
$errs = false;
while($row = $result->fetch_assoc()){
    $row['alerts'] = preg_replace('/[^!@#%^&]+/i', '', $row['alerts']);
    if($row['group_id'] != $cur_group_id){
        if($errs){
            foreach($members as $member => $data){
                printf('<tr><td>%d%d</td><td>%s</td><td>%s</td><td>%s</td></tr>',
                    $data['group_id'],
                    $data['sub_id'],
                    $data['name_last'],
                    $data['name_first'],
                    $data['alerts']);
            }
        }
        /* reset current group */
        $cur_group_id = $row['group_id'];
        $members = array();
        $symbol = $row['alerts'];
        $errs = false;
    }
    $members[] = $row;
    if($row['alerts'] != $symbol || strlen($row['alerts']) > 1){
        $errs = true;
    }
}

Javascript onclick，如何为某些元素设置不同的alpha？

3 个答案: