Html contents can be changed byJavascripts.
getElementById( ) is one of the JS HTML.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Intro?</h2>
<p id="ex">JavaScript can change HTML contents.</p>
<button type="button" onclick='document.getElementById("ex").innerHTML = "Hello!"'>Click Me!</button>
</body>
</html>
Output :
default/before clicking button
html content changed after clicking the button
CSS (Html Styles) can be changed by Javascripts :
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Intro</h1>
<p id="ex">Style of an HTML element can be changed from JS.</p>
<button type="button" onclick="document.getElementById('ex').style.fontSize='40px'">Click Me!</button>
</body>
</html>
Output :
default/before clicking button
html style(CSS) changed after clicking the button
HTML Elements can be hidden from JS :
It is done by changing the display style.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Intro</h1>
<p id="ex">HTML elements can be hidden from JS</p>
<button type="button" onclick="document.getElementById('ex').style.display='none'">Click Me!</button>
</body>
</html>
Output :
Html content is unhidden here
Content is hidden after clicking the button
HTML Elements can be shown by JS
With JS the hidden Html Elements can be displayed by changing the display style.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Intro</h1>
<p>HTML elements can be displayed from JS</p>
<p id="ex" style="display:none">Hello!</p>
<button type="button" onclick="document.getElementById('ex').style.display='block'">Click Me!</button>
</body>
</html>
Output :
hidden html content is not displayed here
hidden html content is displayed after clicking the button
Leave a Reply