JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JQuery CSS
Hiding HTML Elements
jQuery
Example
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
</head>
<body>
<h2>Get Text Content</h2>
<p id=”01″>Hello World!</p>
<p id=”02″>Hello Sweden!</p>
<p id=”03″>Hello Japan!</p>
<p id=”demo”></p>
<script>
$(document).ready(function() {
$(“#02”).hide();
});
</script>
</body>
</html>
Output
Get Text Content
Hello World!
Hello Sweden!
Hello Japan!
JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>Hide HTML Elements</h2>
<p id=”01″>Hello World!</p>
<p id=”02″>Hello Sweden!</p>
<p id=”03″>Hello Japan!</p>
<script>
document.getElementById(“02”).style.display = “none”;
</script>
</body>
</html>
Output
Get Text Content
Hello World!
Hello Sweden!
Hello Japan!
Showing HTML Elements
jQuery
Example
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
</head>
<body>
<h2>Show HTML Elements</h2>
<p id=”01″ style=”display:none”>Hello World!</p>
<p id=”02″ style=”display:none”>Hello Sweden!</p>
<p id=”03″ style=”display:none”>Hello Japan!</p>
<script>
$(document).ready(function() {
$(“#02”).show();
});
</script>
</body>
</html>
Output
Show HTML Elements
Hello Sweden!
JavaScript
Example
<!DOCTYPE html>
<html>
<body>
<h2>Show HTML Elements</h2>
<p id=”01″ style=”display:none”>Hello World!</p>
<p id=”02″ style=”display:none”>Hello Sweden!</p>
<p id=”03″ style=”display:none”>Hello Japan!</p>
<script>
document.getElementById(“02”).style.display = “”;
</script>
</body>
</html>
Output
Show HTML Elements
Hello Sweden!
Styling HTML Elements
Change the font size of an HTML element:
jQuery
Example
<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
</head>
<body>
<p id=”demo”>Change the style of an HTML element(size is 20px)</p>
<script>
$(document).ready(function() {
$(“#demo”).css(“font-size”,”20px”);
});
</script>
</body>
</html>
Output
Change the style of an HTML element(size is 20px)
Javascript
Example
<!DOCTYPE html>
<html>
<body>
<p id=”demo”>Change the style of an HTML element(size is 20px)</p>
<script>
document.getElementById(“demo”).style.fontSize = “20px”;
</script>
</body>
</html>
Output
Change the style of an HTML element(size is 20px)