<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:200px"><button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>//Js change element css
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>//Js change element css<p id="demo">JavaScript can change the style of an HTML element.</p><button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
//hide element
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>//show element
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>//css and html
<!Doctype html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: green;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
margin-top:20px;
}
</style>
<body>
<h2>My First JavaScript Animation</h2>
<div id="container"> // id is the same with css class name
<div id="animate"></div>
</div>
</body>
</html>