Tutorial

Forum

Sign Up

log In

JS
What Can You Do

❮ Previous

Next ❯

1. Modify HTML Content Dynamically


JavaScript can change or update the content of HTML elements after the page has been loaded.

Example
<!DOCTYPE html>
<html>
<head>
<title>Can Change Html Content</title>
</head>
<body>
<p id="myText">Original Text</p>
<button onclick="document.getElementById('myText').innerHTML = 'Updated Text!'">Change Text</button>
<script>
document.getElementById("myText").innerHTML = "New Text!";
</script>
</body>
</html>

Try it yourself

2. Can change html attribute values


JavaScript can change or update the attributes of HTML elements.

Example
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function modify() {
// Update style attribute of element "heading"
let heading = document.getElementById("heading");
heading.setAttribute("style", "color:green");
}
</script>
</head>
<body>
<h1 id="heading">
WhereisStuff
</h1>
<button onclick="modify()">
Click to modify
</button>
</body>
</html>

Try it yourself

3. Style Manipulation (CSS Styling)


JavaScript can dynamically change the style of HTML elements by modifying CSS properties.

Example
<!DOCTYPE html>
<html>
<head>
<title>Can Change CSS Property</title>
<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<div id="myElement" class="box">Click me</div>
<button onclick="document.getElementById('myElement').classList.toggle('highlight')">Toggle Highlight</button>

<script>
document.getElementById("myElement").style.color = "blue";

</script>

</body>
</html>

Try it yourself

4. Can Hide HTML Elements


Hiding HTML elements can be done by changing the display style


Example
<!DOCTYPE html>
<html>
<title>Can Hide Html</title>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>

Try it yourself

5. Can Show HTML Elements


Showing hidden HTML elements can also be done by changing the display style

Example
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>

Try it yourself
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.