HTML DOM HR Object: Accessing Horizontal Rule Elements

The HTML DOM HR object represents an HTML <hr> element, also known as a horizontal rule. This element is used to create a thematic break or a visual divider between content sections on a web page. Using JavaScript, you can access, modify, and manipulate <hr> elements to dynamically adjust their properties, styles, and behaviors, making web pages more interactive and visually appealing. This article will explore the various methods and properties available through the HR object, providing clear examples and use cases.

What is the HTML HR Object?

The HR object is part of the HTML Document Object Model (DOM). It is an interface that corresponds directly to the <hr> element in HTML. This object allows you to interact with horizontal rule elements using JavaScript, enabling you to:

• Retrieve and modify the attributes of <hr> elements.
• Change the styles and appearance of horizontal rules dynamically.
• Respond to user interactions and update the layout of a web page.

Accessing the HR Element

Before you can modify an <hr> element, you first need to access it using the DOM. Common methods for this include:

• document.getElementById(): Access an element by its unique ID.
• document.querySelector(): Access an element using CSS-style selectors.
• document.getElementsByTagName(): Access all elements of a specific tag name.

HR Object Syntax

The syntax to access the HR element is straightforward. For example:

// Using getElementById()
const hrElementById = document.getElementById("myHr");

// Using querySelector()
const hrElementByQuery = document.querySelector("#myHr");

// Using getElementsByTagName()
const hrElements = document.getElementsByTagName("hr");
const firstHrElement = hrElements[0];

Key Properties and Methods

The HR object inherits properties and methods from its parent HTMLElement and Element interfaces and provides some specific properties. Key properties include:

Property	Type	Description
`align`	String	Gets or sets the alignment of the horizontal rule. (Deprecated in HTML5, use CSS instead)
`color`	String	Gets or sets the color of the horizontal rule. (Deprecated in HTML5, use CSS instead)
`noShade`	Boolean	Gets or sets whether the horizontal rule should be rendered as a solid line (without shading). (Deprecated in HTML5, use CSS instead)
`size`	Number	Gets or sets the height (thickness) of the horizontal rule in pixels. (Deprecated in HTML5, use CSS instead)
`width`	String	Gets or sets the width of the horizontal rule. Can be a number (pixels) or a percentage. (Deprecated in HTML5, use CSS instead)
`style`	Object	Returns the inline style of the element as a CSSStyleDeclaration object.

Note: Many of the properties like align, color, noShade, size, and width are deprecated and should be controlled using CSS styles for modern web development practices. ⚠️

Basic Examples of HR Manipulation

Let’s explore some basic examples to see how to use these properties in practice. In these examples, we will show deprecated attributes as well as the current way of setting the style.

Setting the Style of HR Element using Javascript

<hr id="hrStyle" style="width: 50%; border: 2px solid green;">
<p>This is a paragraph before the horizontal rule.</p>
<p>This is a paragraph after the horizontal rule.</p>

<script>


    const hrStyleElement = document.getElementById('hrStyle');
    hrStyleElement.style.backgroundColor = 'lightgreen';
    hrStyleElement.style.borderColor = 'darkgreen';
    hrStyleElement.style.borderWidth = '3px';
    hrStyleElement.style.marginTop = '20px';
    hrStyleElement.style.marginBottom = '20px';


</script>

Here we access the hr element using document.getElementById(), then, we modify its CSS style properties to make it stand out using Javascript.

Changing the width of the HR element

<hr id="hrWidth" width="70%">

<button onclick="changeHrWidth()">Change Width</button>

<script>


  const hrWidthElement = document.getElementById("hrWidth");
  function changeHrWidth() {
    hrWidthElement.style.width = '80%';
    hrWidthElement.style.borderWidth = '2px'; // Set the border-width
    hrWidthElement.style.borderColor = 'blue'; // Set the border-color
  }


</script>

In this example, the <hr> element’s width is initially set in the HTML. The button triggers a function that uses JavaScript to change the width to 80% and adding border properties.

Deprecated Example (Not Recommended): Changing Color of HR Element

<hr id="hrColor" size="5" color="red">
<button onclick="changeHrColor()">Change Color</button>

<script>


const hrColorElement = document.getElementById("hrColor");
    function changeHrColor() {
      hrColorElement.color = "blue";
    }


</script>

Note: The color attribute is deprecated in HTML5. Use the style.backgroundColor or style.borderColor property instead for better compatibility. This example is to show how we can still use the old attribute. ⚠️

Example of Toggling Shading of HR Element

<hr id="hrShade" noshade>
<button onclick="toggleShade()">Toggle Shading</button>

<script>


  const hrShadeElement = document.getElementById("hrShade");
  function toggleShade() {
    hrShadeElement.noShade = !hrShadeElement.noShade;
    if (hrShadeElement.noShade) {
      hrShadeElement.style.borderStyle = 'solid';
    } else {
       hrShadeElement.style.borderStyle = 'inset';
    }
  }


</script>

Note: The noShade attribute is deprecated. Use the style.borderStyle property instead for better control. This example shows how we can still use the old attribute, and also use style to get correct results. ⚠️

Example of Changing the Height of HR Element

<hr id="hrSize" size="2">
<button onclick="changeHrSize()">Change Size</button>

<script>


    const hrSizeElement = document.getElementById("hrSize");
    function changeHrSize() {
        hrSizeElement.size = 8;
        hrSizeElement.style.height = '8px';
         hrSizeElement.style.borderColor = 'black';
    }


</script>

Note: The size attribute is deprecated. Use the style.height property instead for better control. This example shows how we can still use the old attribute, and also use style to get correct results. ⚠️

Using style Property

The style property returns a CSSStyleDeclaration object, which allows you to access and modify all CSS properties of the element. This is the modern way of interacting with HR element style.

<hr id="hrStyleProp" />

<script>


  const hrStylePropElement = document.getElementById("hrStyleProp");
  hrStylePropElement.style.backgroundColor = "lightblue";
  hrStylePropElement.style.height = "5px";
  hrStylePropElement.style.border = "none";
  hrStylePropElement.style.marginBottom = "20px";


</script>

This example sets the background-color, height, border, and margin-bottom of the <hr> element using the style property.

Real-World Applications

The HR object can be used in various practical scenarios, such as:

• Dynamic Content Dividers: Create horizontal rules that change appearance or position based on user interaction or other dynamic page updates.
• Visual Hierarchy: Use JavaScript to adjust the style of <hr> elements to indicate different levels of thematic breaks within a page.
• Interactive Forms: Dynamically add or remove <hr> elements to structure complex forms.
• Responsive Design: Adjust <hr> element widths or visibility based on screen size.

Use Case: Adding a Dynamic Horizontal Rule on Button Click

This example shows how to dynamically add a horizontal rule when a button is clicked.

<div id="hrContainer">
  <p>Initial Content</p>
  <!-- Horizontal rule will be added here -->
</div>

<button onclick="addDynamicHr()">Add Horizontal Rule</button>

<script>


  const hrContainerElement = document.getElementById('hrContainer');
  function addDynamicHr() {
      const newHr = document.createElement('hr');
      newHr.style.border = '2px solid purple';
      newHr.style.width = '80%';
       newHr.style.margin = '20px auto';
      hrContainerElement.appendChild(newHr);
  }


</script>

Here, we add a horizontal rule to the hrContainer div by creating an hr element and modifying the style.

Browser Support

The HTML DOM HR object is fully supported by all modern browsers. This ensures a consistent behavior across all platforms.

Note: Always test your web pages on multiple browsers and devices to ensure a consistent and expected behavior. 🧐

Conclusion

The HTML DOM HR object provides the necessary tools to manipulate the <hr> element using JavaScript, enabling dynamic visual enhancements and better page layout control. By understanding the properties and methods of the HR object, you can create more interactive and user-friendly web pages. Although some of the older attributes are deprecated, using CSS styles to set properties is recommended for better results.