JavaScript einfügen CSS in .setAttribute()

HTML:JavaScript einfügen CSS in .setAttribute()

<body> 
    <p>Colors</p> 
    <ul> 
     <li>Red</li> 
     <li>Green</li> 
     <li>Bleu</li> 
    </ul> 
</body>

CSS:

body { 
     background-color: #8fbc8f; 
     font-family: Arial, sans-serif; 
     font-size: 1em; 
    } 

.first { color: red; } 
.second { color: green; } 
.third { color: blue; }

Ich brauche die .setAttribute() zu verwenden, so dass 'Red' bekommt die .First von CSS, 'Grün' bekommt die Sekunden und 'Blau' bekommt den .Third. Ich habe viele Dinge ausprobiert, aber ich weiß nicht, welchen Namen und welchen Wert ich verwenden muss, damit mein Code korrekt ist.

Unten ist mein Skript im Moment, das scheint nicht zu funktionieren. Kann mir jemand sagen, wie ich das machen kann?

function Colors() { 
    let color = document.getElementsByTagName("li"); 
    color[0].setAttribute("demo.css","first"); 
    color[1].setAttribute("demo.css","second"); 
    color[2].setAttribute("demo.css","third") 
}

Quelle

2017-01-08 ThomasP

Sie wollen das class Attribut setzen:

color[0].setAttribute("class", "first")

function Colors() { 
 
    let color = document.getElementsByTagName("li"); 
 
    color[0].setAttribute("class", "first"); 
 
    color[1].setAttribute("class", "second"); 
 
    color[2].setAttribute("class", "third"); 
 
} 
 
Colors()

body { 
 
     background-color: #8fbc8f; 
 
     font-family: Arial, sans-serif; 
 
     font-size: 1em; 
 
    } 
 

 
.first { color: red; } 
 
.second { color: green; } 
 
.third { color: blue; }

<body> 
 
    <p>Colors</p> 
 
    <ul> 
 
     <li>Red</li> 
 
     <li>Green</li> 
 
     <li>Blue</li> 
 
    </ul> 
 
</body>

Quelle

2017-01-08 17:21:56 Uriel

wahrscheinlich an diesem Punkt besser, die 'element.classList' Schnittstelle zu verwenden, dynamische Klassennamen in Einklang zu bringen. – dandavis

JavaScript einfügen CSS in .setAttribute()

Antwort

Verwandte Themen