javascript - How to make multiple .setAttribute on a single element - Stack Overflow

admin管理员组

文章数量:1345310

my code is

elem.setAttribute( 'style','background-color:' + l_DivBgcolor);

and i want also to add a border color same to the color of the bgcolor.. my problem is how do i add another style to the current style after setting a bgcolor?

i trien putting

elem.setAttribute( 'style','border-color:' + l_DivBgcolor  );

after the first setAttribute but it removes the bgcolor ang set the border color only..

my code is

elem.setAttribute( 'style','background-color:' + l_DivBgcolor);

and i want also to add a border color same to the color of the bgcolor.. my problem is how do i add another style to the current style after setting a bgcolor?

i trien putting

elem.setAttribute( 'style','border-color:' + l_DivBgcolor  );

after the first setAttribute but it removes the bgcolor ang set the border color only..

• javascript
• dom
• attributes

Share Improve this question Follow edited Nov 25, 2010 at 15:45 Gabriele Petrioli 196k3434 gold badges271271 silver badges328328 bronze badges asked Nov 25, 2010 at 15:41 JCmJCm 2,01988 gold badges3030 silver badges4646 bronze badges

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 6

Don't use an attribute for this. Attributes are incorrectly implemented in IE and are almost never what you need. Also, assigning to the style attribute will wipe out existing inline styles, including those set by script. Use the universally-supported style property instead:

elem.style.backgroundColor = l_DivBgcolor;
elem.style.borderColor = l_DivBgcolor;

Can be done with:

elem.setAttribute( 'style','border-color:' + l_DivBgcolor + '; background-color:' + l_DivBgcolor + ';');

Or you could try:

elem.style.display.borderColor = lDivBgcolor;
elem.style.display.backgroundColor = lDivBgcolor;

You can add to (+=) or replace (=) inline style rules with style.cssText.

When appending, any properties that exist in the original style are replaced with the new values. New properties are added, and any in the original but not in the replacement are left as they are.

elem.style.cssText+=';background-color:'+ l_DivBgcolor+';border-color:'+l_DivBgcolor;

Just concatenate them :

elem.setAttribute( 'style','background-color:' + l_DivBgcolor + ';border-color:' + l_DivBgcolor + ';');

Use This

elem.setAttribute( 'style','background-color:' + l_DivBgcolor+ ' border-color:' + l_DivBgcolor);

Variable and hard code values:

element.setAttribute( 'style','top:' + t + '; left:' + l + '; width:' + w + '; height:' + h + ';');
element.setAttribute( 'style','top: 0; left: 0 ; right: 0; bottom: 0; opacity: 0.7;');

you can use the Object and set multiAttribute! for Example if use a tag and

let attGroup={
id:'demo',
class:'style',
href:'#'
};

for(let key in attGroup){
 elem.setAttribute(`${key}`,`${attGroup[key]}`);
}

<a id="demo" class="style" href="#">Link</a>

Since you are changing the style attribute and not the style properties of the element directly you can concatenate the styles in a string

var atValue = 'border-color:' + l_DivBgcolor + ';';
atValue += 'background-color:' + l_DivBgcolor + ';';

elem.setAttribute( 'style', atValue );

本文标签： javascriptHow to make multiple setAttribute on a single elementStack Overflow