css - How can I add a style class name onto my anchor element using JavaScript - Stack Overflow

admin管理员组

文章数量:1394544

I know how to use JavaScript to add an anchor element to my page, for example

var userName_a = document.createElement('a');

However, now I'd like to add a style name onto that element also, for example I tried

var userName_a = document.createElement('a class="normalLink"');

Which didn't work, and caused my JavaScript to stop running.

Which is the best way to add a style name to an element Iv'e created using JavaScript?

I know how to use JavaScript to add an anchor element to my page, for example

var userName_a = document.createElement('a');

However, now I'd like to add a style name onto that element also, for example I tried

var userName_a = document.createElement('a class="normalLink"');

Which didn't work, and caused my JavaScript to stop running.

Which is the best way to add a style name to an element Iv'e created using JavaScript?

• javascript
• css

Share Improve this question Follow edited Dec 5, 2018 at 13:28 shawty 5,83922 gold badges4242 silver badges7272 bronze badges asked Jan 26, 2016 at 2:50 TomTom 84311 gold badge99 silver badges3030 bronze badges 1

• 2 after you've created it, do something like userName_a.className = 'normalLink'; to add a class - but if you want to add STYLE as you asked, use userName_a.style for example userName_a.style.background = 'red'; or userName_a.style.cssText = 'color:blue; width:40px; height:20px;'; – Jaromanda X Commented Jan 26, 2016 at 2:52

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

The createElement function takes only the name of the HTML tag you wish to create, nothing else.

You access the style(s) of an element by using style property, or adding/removing style classes either through the className, or classList list

Style property

userName_a.style.background = "#FF0000";
userName_a.style["font-size"] = "20px";

className

userName_a.className = "active";

classList

userName_a.classList.add("active");
userName_a.classList.remove("active");
userName_a.classList.toggle("active");

like this

var userName_a = document.createElement('a');
document.body.appendChild(userName_a);
userName_a.innerHTML='HELLO WORLD';
userName_a.style='color:red;background:yellow'

The most consistent way is to use the setAttribute function:

var userName_a = document.createElement('a');
userName_a.setAttribute( 'class', 'normalLink' );
userName_a.setAttribute( 'style', 'color:blue;font-weight:bold;' );

Since it looks like you just want to have a class name on the object, the simplest way to do that is to just assign a class name to the object after you create it:

var userName_a = document.createElement('a');
userName_a.className = "normalLink";

You can also just modify the style property directly too:

userName_a.style.color = "red";
userName_a.style.textDecoration = "none";

本文标签： cssHow can I add a style class name onto my anchor element using JavaScriptStack Overflow