Skip to content
Related Articles

Related Articles

HTML | DOM Pre width Property
  • Last Updated : 22 Apr, 2020

The HTML DOM Pre width Property is used to set or return the value of the width attribute of the <pre> element.

Syntax:

  • It returns a pre width Property.
    preObject.width
  • It is used to set the pre width property.
    preObject.width = "pixel";

Property Values:

  • pixels: It sets the width of a predetermined text in terms of pixels.
  • %: It sets the width of predetermined text in terms of percentage (%).

Return Values: It returns a numeric value which represents the width of the <pre> element.

Example 1: This example returns the width property of a pre element.






<!DOCTYPE html> 
<html
  
<head
    <title>DOM pre width Property</title
</head
  
<body
    <center
        <h1>GeeksForGeeks</h1
        <h2>DOM pre width Property</h2
          
        <!-- Assigning id to pre tag -->
        <pre id="GFG" width="50%"
            GeeksforGeeks 
            A Computer Science Portal For Geeks 
        </pre
          
        <button onclick="myGeeks()"
            Submit 
        </button
          
        <p id="sudo"></p>
          
        <script
            function myGeeks() { 
                  
                // Accessing pre tag. 
                var g = document.getElementById(
                            "GFG").width;
                  
                document.getElementById(
                        "sudo").innerHTML = g; 
            
        </script>
    </center
</body
  
</html>

Output:

  • Before Clicking On Button:
  • After Clicking On Button:

Example 2:




<!DOCTYPE html> 
<html
  
<head
    <title>DOM pre width Property</title
</head
  
<body
    <center
        <h1>GeeksForGeeks</h1
        <h2>DOM pre width Property</h2
          
        <!-- Assigning id to pre tag -->
        <pre id="GFG" width="50%"
            GeeksforGeeks 
            A Computer Science Portal For Geeks 
        </pre
          
        <button onclick="myGeeks()"
            Submit 
        </button
          
        <p id="sudo"></p>
          
        <script
            function myGeeks() { 
                  
                // Accessing pre tag. 
                var g = document.getElementById(
                            "GFG").width = "200px";
                              
                document.getElementById(
                        "sudo").innerHTML = g; 
            
        </script
    </center
</body
  
</html>

Output:

  • Before Clicking On Button:
  • After Clicking On Button:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :