How to change CSS Bootstrap style using JavaScript dynamically?

Question

I have this style in my custom css stylesheet:

.nav.nav-tabs > li > a {
    background-color: #c6dfff;
    margin-right: 5px;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    color: black;
}

I have a button using AngularJS ng-click:

<button type="button" class="btn btn-primary" ng-click="changeColor()">Change Color</button>

When the user clicks on the button, it calls a changeColor method:

            $scope.changeColor= function () {
                // Change Color Here
            };

I want to dynamically change the background-color of the above listed style to a different color.

You haven't met the minimum requirements for a question. Please show 1) your HTML snippet, and 2) what you've tried to solve this problem. — isherwood
– isherwood, Commented May 1, 2015 at 19:01
I was able to change my body background color using: document.body.style.background = "whateverColor"; However, I wasn't sure how to change any style, not just the nav-tabs, via JavaScript. — anad2312
– anad2312, Commented May 1, 2015 at 19:04

user4826496 · Accepted Answer · 2015-05-01 19:14:20Z

2

alright, so If you want to use javascript, you could do this one of two ways. The first would be to assign the object an ID, or if multiple objects you would use a class.

for an ID

document.getElementById("myId").style.backgroundColor="yourcolor"

replace your color with the color you want and myID with the ID of the object. If you have multiple objects with the same class,

for a class

document.getElementsByClassName("myclassname").style.backgroundColor="yourcolor"

again, replace the myclassname with the name of the class; same for your color

or if you want to use JQuery

$(".myclassname").css("background-color", "your color");

typically, you use classes for multiple items, and IDs for single ones. feel free to comment and Ill add anything else you need; as i am a little uncertain of the specifics of what you are asking.

answered May 1, 2015 at 19:14

user4826496

Sign up to request clarification or add additional context in comments.

1 Comment

anad2312 Over a year ago

Tried the JQuery method and it didn't work. I need to set the class for the active tab: $(".nav.nav-tabs > li > a").css("background-color", "red");

Samurai · Accepted Answer · 2015-05-01 20:00:22Z

0

Get the selected value from dropdown, either by using onchange on the select or in a button click. Then use the value to assign it to the background of the element you want.

HTML:

<select id="bgselect" onchange="changeBg()">
    <option value="black">Black</option>
    <option value="blue">Blue</option>
    <option value="#000080">Navy Blue</option>
    ...
</select>

Javascript:

function changeBg() {
    var bg = document.getElementById("bgselect").value;
    document.getElementById("dbg").style.background = bg;
}

jsfiddle DEMO

EDIT:

If you wanna affect elements like .nav.nav-tabs > li > a then you need to find all such elements and then apply the style:

function changeBg() {
    var bg = document.getElementById("bgselect").value;
    var navs = document.querySelectorAll(".nav.nav-tabs");
    var as = navs[0].getElementsByTagName('a');
    for(var i = 0; i < as.length; i++) {
        as[i].style.background = bg;
    }
}

updated jsfiddle

edited May 1, 2015 at 20:00

answered May 1, 2015 at 19:19

Samurai

3,7295 gold badges29 silver badges41 bronze badges

1 Comment

anad2312 Over a year ago

This is close to what I am looking for; However, the style that I need to change is the one listed in my post: .nav.nav-tabs > li > a

Collectives™ on Stack Overflow

How to change CSS Bootstrap style using JavaScript dynamically?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related