We can also Access the display property of an HTML element using JavaScript code. Now create a Web page named display-js.html to learn how to control the display of elements using JavaScript.
<!DOCTYPE HTML>
<HEAD>
<TITLE>DISPLAY PROPERTY USING JavaScript</TITLE>
<STYLE type="text/css">
p{display:inline;}
</STYLE>
</HEAD>
<BODY>
<H1>Changing the Display property Using JavaScript</H1>
<H2>Hello Dear All</H2>
<p Id="display">Changing the display</p>
<p Id="display">property of the paragraph</p>
<br><br>
<INPUT type="button" onclick="document.getElementById('display').style.display='block';" value="display:block">
<INPUT type="button" onclick="document.getElementById('display').style.display='inline';" value="display:inline">
</BODY>
</HTML>
We have defined the JavaScript code in the onclick event of buttons to control the display of the P element.
The OutPut of the display-js.html: When we click on display:inline then the output is:
<!DOCTYPE HTML>
<HEAD>
<TITLE>DISPLAY PROPERTY USING JavaScript</TITLE>
<STYLE type="text/css">
p{display:inline;}
</STYLE>
</HEAD>
<BODY>
<H1>Changing the Display property Using JavaScript</H1>
<H2>Hello Dear All</H2>
<p Id="display">Changing the display</p>
<p Id="display">property of the paragraph</p>
<br><br>
<INPUT type="button" onclick="document.getElementById('display').style.display='block';" value="display:block">
<INPUT type="button" onclick="document.getElementById('display').style.display='inline';" value="display:inline">
</BODY>
</HTML>
We have defined the JavaScript code in the onclick event of buttons to control the display of the P element.
The OutPut of the display-js.html: When we click on display:inline then the output is:
The text of P element is displayed in a single line. when we click the display:block button the text is divided in two lines. Shown in output.
No comments:
Post a Comment