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 Parameter Object
The HTML DOM Parameter Object represents the <param> element in an HTML document. The <param> element defines parameters for <object> elements, typically used for embedding multimedia content like audio, video, or plugins.
Syntax
Following is the syntax to create a param object using JavaScript −
document.createElement("PARAM");
Following is the HTML syntax for the <param> element −
<object data="media-file"> <param name="parameterName" value="parameterValue"> </object>
Properties of Parameter Object
The Parameter Object has two main properties that correspond to its HTML attributes −
| Property | Description |
|---|---|
name |
Sets or returns the value of the name attribute of the param element. This specifies the parameter name. |
value |
Sets or returns the value of the value attribute of the param element. This specifies the parameter value. |
Creating a Parameter Object
You can create a Parameter Object dynamically using JavaScript's createElement() method and then append it to an <object> element.
Example
Following example demonstrates creating a param object and setting its properties −
<!DOCTYPE html>
<html>
<head>
<title>DOM Parameter Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>DOM Parameter Object Demo</h1>
<button onclick="createParam()" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">Create Param Element</button>
<div id="output" style="margin-top: 20px;"></div>
<script>
function createParam() {
// Create an object element
var objectElement = document.createElement("OBJECT");
objectElement.setAttribute("data", "sample-audio.mp3");
objectElement.setAttribute("type", "audio/mpeg");
objectElement.style.width = "300px";
objectElement.style.height = "50px";
// Create a param element
var paramObject = document.createElement("PARAM");
paramObject.name = "autoplay";
paramObject.value = "false";
// Append param to object
objectElement.appendChild(paramObject);
// Display the created elements
var output = document.getElementById("output");
output.innerHTML = "<h3>Created Elements:</h3>";
output.appendChild(objectElement);
// Display param properties
output.innerHTML += "<p>Parameter Name: " + paramObject.name + "</p>";
output.innerHTML += "<p>Parameter Value: " + paramObject.value + "</p>";
}
</script>
</body>
</html>
The output shows the created object element with its param child, along with the parameter properties −
DOM Parameter Object Demo [Create Param Element] (button) Created Elements: [Audio object element] Parameter Name: autoplay Parameter Value: false
Accessing Parameter Properties
You can access and modify the properties of existing param elements using JavaScript.
Example
Following example shows how to access and modify param element properties −
<!DOCTYPE html>
<html>
<head>
<title>Parameter Object Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Parameter Object Properties</h2>
<object data="video.mp4" type="video/mp4" width="300" height="200">
<param id="myParam" name="controls" value="true">
Your browser does not support the object element.
</object>
<div style="margin-top: 20px;">
<button onclick="showProperties()" style="padding: 8px 16px; margin: 5px; background: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer;">Show Properties</button>
<button onclick="modifyParam()" style="padding: 8px 16px; margin: 5px; background: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">Modify Value</button>
</div>
<div id="result" style="margin-top: 15px; padding: 10px; background: #f8f9fa; border-radius: 5px;"></div>
<script>
function showProperties() {
var param = document.getElementById("myParam");
var result = document.getElementById("result");
result.innerHTML = "<strong>Current Parameter Properties:</strong><br>" +
"Name: " + param.name + "<br>" +
"Value: " + param.value;
}
function modifyParam() {
var param = document.getElementById("myParam");
param.value = "false";
var result = document.getElementById("result");
result.innerHTML = "<strong>Parameter Modified!</strong><br>" +
"Name: " + param.name + "<br>" +
"New Value: " + param.value;
}
</script>
</body>
</html>
The example allows you to view and modify the param element's properties dynamically −
Parameter Object Properties [Video object with controls] [Show Properties] [Modify Value] Current Parameter Properties: Name: controls Value: true
Common Use Cases
The Parameter Object is commonly used for −
Multimedia configuration − Setting autoplay, controls, and loop parameters for audio/video objects.
Plugin parameters − Configuring Flash, Java applets, or other embedded plugins.
Dynamic content control − Modifying object behavior through JavaScript manipulation of param elements.
Browser Compatibility
The Parameter Object is supported in all modern browsers. However, the <object> and <param> elements are primarily used for legacy plugin content. For modern multimedia, HTML5 <audio> and <video> elements are preferred over object elements with param configurations.
Conclusion
The HTML DOM Parameter Object provides programmatic access to <param> elements, allowing you to create, access, and modify parameters for embedded objects. While primarily used for legacy plugin content, understanding the Parameter Object is valuable for maintaining older web applications and working with specialized embedded content.
195 Views
