How do I change a CSS property in JavaScript?

Asked Feb 28 '18 at 19:31

Active Mar 02 '18 at 17:02

Viewed 35 times

I have green circle in my html file (index.html) and I want to change the color by clicking a button which runs the JavaScript (change.js).

Here is index.html:

<!DOCTYPE html>
<html>
<body>
<style type="text/css">
    #circle {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background: green;
    }

</style>

<h1>Change Colors</h1>

<div id="circle"></div>

<p>
<div>
    <button type="button" onclick="change.js">Change Color</button>
</div>
</p>


</body>
</html>

Here is change.js:

function myFunction() {
    document.getElementById("circle").style.background="red";
}

edited Mar 02 '18 at 17:02

asked Feb 28 '18 at 19:31

maestro777

3

You need to learn the difference between server-side code and client-side code. You need to learn Javascript. – SLaks Feb 28 '18 at 19:32
the idea is correct but you are still far in the code ... you need to learn about ajax request – Temani Afif Feb 28 '18 at 19:34
I answered my own question. I had to change onclick in the html to equal "myFunction()". – maestro777 Mar 02 '18 at 17:46

How do I change a CSS property in JavaScript?

0 Answers0