HTML | DOM Pre Object
The DOM Pre Object is used to represent the HTML <pre> element. The pre element is accessed by getElementById().
Properties:
- width: It is used to set or return the value of the width attribute of the pre element.
Syntax:
document.getElementById("ID");
Where “id” is the ID assigned to the “pre” tag.
Example-1:
html
<!DOCTYPE html><html><head> <title>DOM pre Object</title></head><body> <center> <h1>GeeksForGeeks</h1> <h2>DOM pre Object</h2> <!-- Assigning id to pre tag --> <pre id="GFG"> GeeksforGeeks A Computer Science Portal For Geeks </pre> <button onclick="myGeeks()"> Submit </button> <script> function myGeeks() { // Accessing pre tag. var g = document.getElementById("GFG"); g.style.color = "blue"; g.style.fontSize = "15px"; } </script> </center></body></html> |
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2 : Pre Object can be created by using the document.createElement Method.
html
<!DOCTYPE html><html><head> <title>DOM pre Object</title></head><body> <center> <h1>GeeksForGeeks</h1> <h2>DOM pre Object</h2> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { // Creating 'pre' object. var g = document.createElement("PRE"); var f = document.createTextNode("GeeksForGeeks" +"A Computer Science Portal For Geeks."); g.appendChild(f); document.body.appendChild(g); } </script> </center></body></html> |
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM Pre Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...