0

I am using Bootstrap (in Bootstrap Studio) and plain JavaScript. I have colored the background of my <div> element by setting the CSS color to the default color. Now, I am trying to change that CSS color by setting a new value when a new tab is selected.

The goal is to change the background color of tabs and their corresponding content. For example, tab 1 will have a blue background, and tab 2 will have an orange background; the background color will change as you switch between them. I have set the base color by styling the parent div background. (The reason I did not color the tab-content and active tab specifically is that the colored area was not big enough).

Below is the JS function I currently have.

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

Bellow is the CSS styling on the parent <div id= ‘tabDiv’&gt; , and for the active tab.

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

Below is the general structure of my 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>

When I run the code as it is this is what the console prints out:

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

So, I moved the initial CSS styling to the HTML div to look like <div id=’tabDiv’ style=”background: linear-gradient(144deg, #8c3a83, #682b61);”&gt;. I’m using Bootstrap Studio (required by my work place), which gave me that new inline style format.

When running the code with styling in the HTML instead of the CSS files I get this:

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)

I have also tried changing the formatting and color type (hex or RGB) of the HTML style declaration, and in the JS function where I set the new color. But the same basic issue of, the Old Color does not actually update/change during my JS function. I have also tried adding the !important to my new color in JS.

I’ve read that this may be an issue with what is being rendered first. As I am new to Bootstrap Studio I have tagged this here. I know that you can change the order of the same file types but is there a way to change the order of CSS vs JS? However, I’m not sure if this is it because in another function I am successfully updating the style.display from ‘none’ to ‘blocked’.

StackOverflow has offered questions similarly worded to my title. Some of them involved properly retrieving the element, and wrapping the function in a window.onload. Both of which I think have working. There is a window.addEventListener('load', function); call at the top of my JS files, and other functions called from that work properly. I have also console logged to check that tabs I am event listening for are being selected successfully and correctly, and the same for the <div id=’tabDib’&gt; I want to change the property of. I have also tried having no default color and changing/adding the new colors in my JS function.

Does the issue lie somewhere in code or logic? Any advice would be appreciated. I know this was long, thank you for reading.

tl;dr Trying to change the styling of an HTML element using a js function but the color is not changing. This sounds like a basic issue but I haven’t found anything that has works.

4

2 回答 2

0

谢谢@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);
                
        })
    });
}
于 2020-10-30T21:10:39.763 回答
0

首先，如果要设置属性（在您的情况下，背景颜色为内联样式），您可以使用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);
})
于 2020-10-30T02:09:22.713 回答