Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Variable Object
The HTML DOM Variable Object represents the <var> element in the DOM tree. The <var> element is used to define variables in mathematical expressions, programming code examples, or technical documentation. When accessed through JavaScript, it becomes a DOM object with properties and methods for manipulation.
Syntax
Following is the syntax to create a var object using JavaScript −
document.createElement("VAR");
Following is the syntax for the HTML <var> element −
<var>variable_name</var>
Creating a Variable Object
The var object can be created dynamically using JavaScript's createElement() method. Once created, you can set its content using innerHTML or textContent properties and append it to the document.
Example
Following example demonstrates creating a var object dynamically −
<!DOCTYPE html>
<html>
<head>
<title>DOM var Object Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
background-color: #f9f9f9;
}
h1 { color: #23CE6B; }
.btn {
background-color: #fff;
border: 2px solid #0197F6;
padding: 10px 20px;
color: #0197F6;
cursor: pointer;
border-radius: 20px;
margin: 10px;
}
.btn:hover { background-color: #0197F6; color: white; }
var {
background-color: #e7f3ff;
padding: 2px 6px;
border-radius: 3px;
font-style: italic;
font-weight: bold;
}
.output { margin-top: 20px; font-size: 16px; }
</style>
</head>
<body>
<h1>DOM var Object Demo</h1>
<button onclick="createVar()" class="btn">Create a var object</button>
<div class="output" id="output"></div>
<script>
function createVar() {
var varElement = document.createElement("VAR");
varElement.textContent = 'x = 5';
var textNode = document.createTextNode(" where ");
var varElement2 = document.createElement("VAR");
varElement2.textContent = 'x';
var textNode2 = document.createTextNode(" is a variable");
var container = document.createElement("p");
container.appendChild(document.createTextNode("Equation: "));
container.appendChild(varElement);
container.appendChild(textNode);
container.appendChild(varElement2);
container.appendChild(textNode2);
document.getElementById("output").appendChild(container);
}
</script>
</body>
</html>
The output shows a button that creates styled variable elements when clicked −
DOM var Object Demo [Create a var object] After clicking: Equation: x = 5 where x is a variable (Variables x and x = 5 appear with italic styling and light blue background)
Accessing Existing Variable Elements
You can access existing <var> elements in the document using various DOM methods like getElementById(), getElementsByTagName(), or querySelector().
Example
Following example shows how to access and modify existing var elements −
<!DOCTYPE html>
<html>
<head>
<title>Accessing Variable Elements</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
var {
background-color: #fff3cd;
padding: 3px 6px;
border-radius: 4px;
font-weight: bold;
color: #856404;
}
.btn {
background-color: #007bff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<h2>Mathematical Formula</h2>
<p>The area of a circle is <var id="formula">? × r²</var> where <var>r</var> is the radius.</p>
<button onclick="changeFormula()" class="btn">Change Formula</button>
<button onclick="highlightVars()" class="btn">Highlight Variables</button>
<script>
function changeFormula() {
var formulaElement = document.getElementById("formula");
formulaElement.textContent = "A = ? × r²";
}
function highlightVars() {
var allVars = document.getElementsByTagName("var");
for (var i = 0; i < allVars.length; i++) {
allVars[i].style.backgroundColor = "#ff6b6b";
allVars[i].style.color = "white";
}
}
</script>
</body>
</html>
This example demonstrates accessing var elements by ID and by tag name to modify their content and styling.
Variable Object Properties
The var object inherits standard HTML element properties and methods. Common properties include −
innerHTML− Gets or sets the HTML content inside the var elementtextContent− Gets or sets the text content inside the var elementid− Gets or sets the ID attributeclassName− Gets or sets the class attributestyle− Provides access to CSS styling properties
Example
Following example shows various properties of the var object −
<!DOCTYPE html>
<html>
<head>
<title>Variable Object Properties</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.highlight { background-color: yellow; font-weight: bold; }
var { font-style: italic; }
.info { margin: 10px 0; padding: 10px; background-color: #f0f0f0; border-radius: 4px; }
</style>
</head>
<body>
<h2>Variable Properties Demo</h2>
<p>In the equation <var id="myVar" class="math-var">y = mx + c</var>, each letter represents a variable.</p>
<button onclick="showProperties()" style="padding: 8px 16px; margin: 10px 0;">Show Properties</button>
<button onclick="modifyVar()" style="padding: 8px 16px; margin: 10px 0;">Modify Variable</button>
<div id="info" class="info"></div>
<script>
function showProperties() {
var varElement = document.getElementById("myVar");
var info = "Variable Properties:<br>";
info += "Text Content: " + varElement.textContent + "<br>";
info += "ID: " + varElement.id + "<br>";
info += "Class: " + varElement.className + "<br>";
info += "Tag Name: " + varElement.tagName;
document.getElementById("info").innerHTML = info;
}
function modifyVar() {
var varElement = document.getElementById("myVar");
varElement.textContent = "E = mc²";
varElement.className = "highlight";
}
</script>
</body>
</html>
This example demonstrates how to access and display properties of a var element, as well as modify its content and styling dynamically.
Conclusion
The HTML DOM Variable Object provides programmatic access to <var> elements, allowing you to create, modify, and style variable representations in mathematical expressions and code examples. You can create new var objects using createElement("VAR") and manipulate existing ones using standard DOM properties and methods.
274 Views
