How to connect my CSS and HTML using JavaScript

Question

I have to do some homework with JavaScript. The Exercise is: We programmed a Game called ColorClicker. Very simple. When you win this game, I want to show the 10 best Scores in a list. Now I want to connect this list with my CSS, so I can make it look cooler etc.

My Code in JS:

function showHighscoreList(topTen) {
    var rank = 1
    topTen.forEach( function(entry) {
        var list = document.getElementById("highscoreList"),
            listElement = document.createElement("li"),
            entryElement = document.createElement("i");
        entryElement.innerHTML = "Platz "+rank+" - Username: " + entry.user + " | Score: " + entry.score;
        rank++;
        list.style.backgroundColor="orange";
        listElement.style.fontSize = "larger";
        listElement.addEventListener("click", onHighscoreListClicked);
        listElement.appendChild(entryElement);
        list.appendChild(listElement);
    });
}

And that's my code in HTML:

<div id="highscore">
        <ul id="highscoreList">
        </ul>
</div>

So, now I want to manipulate the HTML elements with CSS. How can I do that in detail?

pavel · Accepted Answer · 2015-05-15 13:31:20Z

3

Stylesheet are linked to HTML document using link tag,

<link rel="stylesheet" href="path-to-your-file/style.css">

answered May 15, 2015 at 13:31

pavel

27.3k11 gold badges47 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pabgaran · Accepted Answer · 2015-05-15 13:33:08Z

0

This two lines are already css manipulation:

list.style.backgroundColor="orange";
listElement.style.fontSize = "larger";

Maybe you can add a class attribute and then apply some css to them:

list.class="list-element list"+rank;

And in css:

.list-element {
    font-size: 12pt;
    /* Other common styles */
}
.list1 {
    color: red;
}
.list2 {
    color: blue;
}

/* And so on...*/

I hope it helps.

answered May 15, 2015 at 13:33

pabgaran

7734 silver badges15 bronze badges

1 Comment

Katana314 Over a year ago

Small tweak: class is not a valid keyword in JavaScript, so the element class attribute is renamed to className (and has expected effects)

Collectives™ on Stack Overflow

How to connect my CSS and HTML using JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related