Bootstrap Studio - 我的 `<div>` 元素的样式属性在我的 JS 函数期间没有改变

Question

我正在使用 Bootstrap（在 Bootstrap Studio 中）和纯 JavaScript。我通过将 CSS 颜色设置为默认颜色来为 <div> 元素的背景着色。现在，我正在尝试通过在选择新选项卡时设置新值来更改 CSS 颜色。

目标是更改选项卡的背景颜色及其相应的内容。例如，选项卡 1 的背景为蓝色，选项卡 2 的背景为橙色；当您在它们之间切换时，背景颜色会发生变化。我通过设置 parent div 背景的样式来设置基色。（我没有特别为 tab-content 和活动选项卡着色的原因是着色区域不够大）。

下面是我目前拥有的JS函数

window.addEventListener('load', startup);
async function startup(){
    // other functions 
    await toggleColor();
}
async function toggleColor(){
    var menuItm = document.getElementsByName('tabGroup').forEach(item =>{
        item.addEventListener('click', event=>{
            var bg= document.getElementById('tabDiv');
            var bgColor = bg.style.background;
            console.log("Old Color: "+bgColor);
            bgColor = 'linear-gradient(to bottom right, #ec7429, #843f1d)'; 
            console.log("New Color: "+bgColor);
                
        })
    });
}

波纹管是 parent <div id= ‘tabDiv’> 和活动选项卡上的 CSS 样式。

#tabDiv {
    background: linear-gradient(to bottom right, #8c3a83, #682b61); 
}
#tabList .nav-link.active {
  color: #E7E8E9; 
  background: linear-gradient(to bottom right, #8c3a83, #682b61); 
}

下面是我的HTML的一般结构。

<div id='tabDiv'>
    <ul id='tabList' class='nav nav-tabs flex-column' role='tablist'>
         <li id='tabID' class='nav-item' role='presentation' name='’tabGroup'>
            <a class='nav-link' role='tab' datta-toggle='tab' href='#tab-1'> TabText </a>
        </li>
    </ul>
    <div class='tab-content'>
        <div id='tab-1' class='tab-pane' role='tabpanel'>
            <p> Tab Content <p>
        </div>
    </div>
</div>

当我运行控制台打印出这样的代码时：

Old Color:                                  
New Color: linear-gradient(to bottom right, #ec7429, #843f1d)       
Old Color: 
New Color: linear-gradient(to bottom right, #ec7429, #843f1d)

所以，我将最初的 CSS 样式移动到 HTML div 看起来像 <div id=’tabDiv’ style=”background: linear-gradient(144deg, #8c3a83, #682b61);”>。我正在使用 Bootstrap Studio（我的工作场所需要），它为我提供了新的内联样式格式。

当运行在 HTML 而不是 CSS 文件中使用样式设置代码时，我得到这个：

Old Color: linear-gradient(144deg, rgb(140, 58, 131), rgb(104, 43, 97))
New Color: linear-gradient(to bottom right, #ec7429, #843f1d)
Old Color: linear-gradient(144deg, rgb(140, 58, 131), rgb(104, 43, 97))
New Color: linear-gradient(to bottom right, #ec7429, #843f1d)

我还尝试更改 HTML 样式声明的格式和颜色类型（十六进制或 RGB），并在我设置新颜色的 JS 函数中进行更改。但同样的基本问题是，在我的 JS 函数中，旧颜色实际上并没有 update/change。我也尝试在 JS 中将 !important 添加到我的新颜色中。

我了解到这可能是首先呈现的内容的问题。由于我是 Bootstrap Studio 的新手，所以我在此处标记了它。我知道你可以 change the order of the same file types 但有没有办法改变 CSS 与 JS 的顺序？但是，我不确定这是不是因为在另一个函数中我成功地将 style.display 从‘none’更新为‘blocked’。

Whosebug 提出了与我的标题措辞相似的问题。其中一些涉及正确检索元素，并将函数包装在 window.onload 中。我认为两者都有效。在我的 JS 文件顶部有一个 window.addEventListener('load', function); 调用，从中调用的其他函数正常工作。我还登录了控制台，以检查我正在监听的选项卡是否被成功且正确地选择，对于 <div id=’tabDib’> 我想更改的属性也是如此。我也尝试过在我的 JS 函数中没有默认颜色和 changing/adding 新颜色。

问题出在代码或逻辑上吗？任何意见，将不胜感激。我知道这很长，感谢您的阅读。

tl;dr 尝试使用 js 函数更改 HTML 元素的样式，但颜色没有改变。这听起来像是一个基本问题，但我还没有找到任何有用的东西。

Answer 1

首先，如果你想设置属性（在你的例子中背景颜色作为内联样式）你可以使用setAttribute方法。

其次，当您在控制台登录 Old color 时得到空值的原因是 bg.style.background 正在寻找内联 style 属性。如果你想使用 css 外部文件，你应该在你的脚本中使用 getComputedStyle 方法。

所以：

item.addEventListener('click', event=> { 
  var bg = document.getElementById('tabDiv');
  var bgColor = bg.style.background; // this will work if you use inline-style
  var bgColor2 = bg.getPropertyValue('background'); // this will work if you use stylesheet
  console.log("Inline Color: "+bgColor + "Stylesheet Color: "+bgColor2);
  bgColor = 'linear-gradient(to bottom right, #ec7429, #843f1d)'; // this doesn't set any property to the element, it just assign a value to a variable.
bg.setAttribute('style', 'background:' + bgColor); // this will set inline style to the element with the color in the variable you declared above.
  console.log("New Color: "+bgColor);
})

Answer 2

谢谢@a-meshu 的帮助！ Bellow 是我的 JS 函数的工作版本。

 async function toggleColor(){
    var menuItm = document.getElementsByName('tabLeft').forEach(item =>{
        item.addEventListener('click', event=>{
            var bg = document.getElementById('tabDiv');
            var bgColor =  window.getComputedStyle(bg);
            bg.setAttribute('style', 'background: linear-gradient(to bottom right, #ec7429, #843f1d)');
            console.log("New Color: "+ bgColor);
                
        })
    });
}

Bootstrap Studio - 我的 `<div>` 元素的样式属性在我的 JS 函数期间没有改变

Bootstrap Studio - The style property of my `<div>` element is not changing during my JS function

html

javascript

css

bootstrap-4