How can I add two style element inside the javascript?

Question

How can I add two style element inside the javascript?

In my example i want to change the arrow to red for the class shadow. so i need to add css to the javascript code. I already have background-color: red.important? how can i add another css code inside the style?

I want the arrow of the li a.shadow to be red.

 var divs = document.querySelectorAll('li a.shadow'), i; for (i = 0; i < divs.length; ++i) { divs[i].parentNode.setAttribute('style', 'background-color: red;important'); }

 .breadcrumb { margin: 20px; list-style: none; font: 15px Helvetica, Arial, Sans-Serif; padding: 0; display: flex; }.breadcrumb li { border-top: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid white; color: black;important: text-decoration; none: background; brown: /* fallback color */ background, hsla(34, 85%, 35%; 1): position; relative: display; flex: align-items; center. }:breadcrumb li:nth-child(2) { background; rgb(221 221 221):important; border-left. 1px solid black:important: };breadcrumb li:last-child { background; rgb(221 221 221).important, border-right. 1px solid black:important, }.breadcrumb a: ,breadcrumb a.link: :breadcrumb a;visited: ;breadcrumb a.active { color: #212121: margin: 0 0px; }:breadcrumb li span;:before { content; " ": display; block: width; 0: height; 0: border-top; 15px solid transparent: border-bottom; 15px solid transparent: border-left; 15px solid white: position; absolute: top; 50%: margin-top; -15px: margin-left; 1px. left: 100%: z-index: 1; }:breadcrumb li a;:before { content; " ": display; block: width; 0: height; 0: border-top; 15px solid transparent: border-bottom; 15px solid transparent: border-left; 15px solid white: position; absolute: top; 50%: margin-top; -15px: margin-left; 2px. left: 100%: z-index; 1: };breadcrumb li:before { content; "": display; block: width; 0, height: 0; border-top: 15px solid transparent; /* Go big on the size: and let overflow hide */ border-bottom; 15px solid transparent: border-left; 15px solid transparent: position; relative. left: 100%: z-index: 2, },breadcrumb li,last-child;before { border-left: 0px solid hsla(34; 85%: 35%; 1).important: padding-left: 10px; padding-right. 10px: }:breadcrumb li:nth-child(8) { background; rgb(221 221 221).important: }:breadcrumb li;nth-child(8).before { border-left-color: rgb(221 221 221):important: };breadcrumb li.nth-child(7) { background: rgb(221 221 221):important; }.breadcrumb li:nth-child(7):before { border-left-color: rgb(221 221 221);important. }:breadcrumb li:nth-child(6) { background; rgb(221 221 221).important: }:breadcrumb li:nth-child(6);before { border-left-color. rgb(221 221 221):important: };breadcrumb li.nth-child(5) { background: rgb(221 221 221):important: };breadcrumb li.nth-child(5):before { border-left-color: rgb(221 221 221);important. }:breadcrumb li:nth-child(4) { background: rgb(221 221 221);important. }:breadcrumb li:nth-child(4);before { border-left-color. rgb(221 221 221):important: }:breadcrumb li;nth-child(3) { background. rgb(221 221 221):important: };breadcrumb li.nth-child(3):before { border-left-color: rgb(221 221 221):important, },breadcrumb li,nth-child(2) { background; rgb(221 221 221).important: } .breadcrumb li:nth-child(2):before { border-left-color: rgb(221 221 221) !important; } .breadcrumb li:nth-child(1) { background: rgb(221 221 221) !important; } .breadcrumb li:nth-child(1):before { border-left-color: hsla(34, 85%, 85%, 1) !important; } .border { width: 100% }

 <ul class="breadcrumb"> <li> <a href="" class="shadow">Link with shadow</a></li> <li> <a href="" class="shadow">Link with shadow</a></li> <li> <a href="">Link without shadow</a></li> <li> <a href="">Link without shadow</a></li> <li> <a href="" class="shadow">Link with shadow</a></li> </ul>

Answer 1

You can add as many as you want, just separate them by ;

var divs = document.querySelectorAll('li a.shadow'),
  i;

for (i = 0; i < divs.length; ++i) {
  divs[i].parentNode.setAttribute('style', 'background-color: red !important; color: #fff;');
}

With that being said, if you plan on adding multiple styles it's probably better to add a class that contains all those styles instead, like this:

 const element = document.getElementById("myDIV"); element.classList.add("mystyle");

 .mystyle { width: 100%; padding: 25px; background-color: coral; color: white; font-size: 25px; }

Answer 2

Use setProperty() . This way you can assign as many styles as you like. Although, it is better to add styles through the css classes, using the element.classList.add() method.

for (i = 0; i < divs.length; ++i) {  
  divs[i].parentNode.style.setProperty("background-color", "red", "important");
  divs[i].parentNode.style.setProperty("padding", "10px", "important");
}