How to apply css in javascript?

Question

I have a few buttons that were made though a loop in javasript.

    var docFrag = document.createDocumentFragment();
    for (var i=0; i < 9 ; i++){ 
        var row = document.createElement("tr") 
        for (var j=0; j < 9 ; j++){ 
                var elem = document.createElement('input');
                elem.class = 'gumb';
                elem.style.color = 'purple';
                elem.type = 'button';
                elem.id = 'r'+i+'s'+j;
                elem.value = '';
                elem.innerHTML = elem.value; 
                docFrag.appendChild(elem); 
            } 
        document.body.appendChild(docFrag); 
        document.body.appendChild(row); 
    }

And I want to apply css to them, but nothing seems to work. I tried it using elem.style and through a special style.css file using the button's class but it doesn't work and I don't know why.

I hope this could help you https://stackoverflow.com/q/35630641/10553411 — Ganesh Thorat, Apr 28 '20 at 13:36

score 4 · Accepted Answer · answered Apr 28 '20 at 13:38

4

Usage of elem.class is wrong. Following usages are valid:

elem.classList.add('gumb')
elem.className = 'gumb'
elem.setAttribute('class', 'gumb')

answered Apr 28 '20 at 13:38

Parnab Sanyal

749
5
19

score 3 · Answer 2 · answered Apr 28 '20 at 13:34

3

You need to change elem.class to elem.className

https://www.w3schools.com/jsref/prop_html_classname.asp

class is a reserved word in a lot of languages, so you'll find it might have an alternative name, such as className

answered Apr 28 '20 at 13:34

andy mccullough

9,070
6
32
55

score 1 · Answer 3 · answered Apr 28 '20 at 13:39

You need use elem.className = 'gumb'; also should set value for button to have purple color

   var docFrag = document.createDocumentFragment();
    for (var i=0; i < 9 ; i++){ 
        var row = document.createElement("tr") 
        for (var j=0; j < 9 ; j++){ 
                var elem = document.createElement('input');
                elem.className = 'gumb';
                
                elem.style.color = 'purple';
                elem.type = 'button';
                elem.id = 'r'+i+'s'+j;
                elem.value = 'A';
                elem.innerHTML = elem.value; 
                docFrag.appendChild(elem); 
            } 
        document.body.appendChild(docFrag); 
        document.body.appendChild(row); 
    }

.gumb{
background-color:"#fff";
}

How to apply css in javascript?

3 Answers3