Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A HTML File Which Demonstrates How Does Custom Attributes Work In HTML5
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Custom Attributes</title>
<style>
#customAttribute
{
border: 2px solid red;
width: 300px;
height: 100px;
float: left;
margin-right: 20px;
}
#resultBox
{
border: 2px solid #87ceeb;
width: 300px;
float: left;
height: 100px;
margin-right: 20px;
}
#buttons
{
clear: left;
position: relative;
top: 20px;
}
#buttonsDataset
{
position: relative;
top: 50px;
}
#inputBox
{
border: 2px solid #adff2f;
width: 300px;
float: left;
height: 100px;
}
</style>
<script type="text/javascript">
function getValue()
{
var ourDiv = document.getElementById('customAttribute'),
attrValue = ourDiv.getAttribute('data-name');
/**
* Insert The Value in the result Box!
*/
document.getElementById('resultBox').innerHTML = attrValue;
}
function setValue()
{
var ourDiv = document.getElementById('customAttribute'),
newValue = document.getElementById('inputBox').innerHTML;
/**
* Change the custom attributes value
*/
ourDiv.setAttribute('data-name', newValue);
/**
* Refresh The RsultBox to it's new value
*/
getValue();
}
function removeAttr()
{
document.getElementById('customAttribute').removeAttribute('data-name');
}
function getValueDataset()
{
var ourDiv = document.getElementById('customAttribute'),
attrValue = ourDiv.dataset.name;
/**
* Insert The Value in the result Box!
*/
document.getElementById('resultBox').innerHTML = attrValue;
}
function setValueDataset()
{
var ourDiv = document.getElementById('customAttribute'),
newValue = document.getElementById('inputBox').innerHTML;
/**
* Change the custom attributes value
*/
ourDiv.dataset.name = newValue;
/**
* Refresh The RsultBox to it's new value
*/
getValueDataset();
}
function removeAttrDataset()
{
document.getElementById('customAttribute').dataset.name = null;
}
</script>
</head>
<body>
<div id="customAttribute" data-name="Custom Attribute's Default value">My Test Case Of The HTML5 Custom Attributes!</div>
<div id="resultBox">Result Box</div>
<div id="inputBox" contenteditable>An Input Box (Click Over Here To Edit This DIV's Content)</div>
<div id="buttons">
<h3>These Buttons Are Working With setAttribute, getAttribute and removeAttribute Functions in JS.</h3>
<label>Getting The Attribute's Current Value</label><input type="button" value="Execute JS Function" onclick="getValue()">
<br>
<label>Setting The Attribute Value</label><input type="button" value="Setting the inserted Value To the custom Attribute" onclick="setValue()">
<br>
<label>Removing The Attribute Itself!</label><input type="button" value="Remove The Custom Attribute From DIV Tag" onclick="removeAttr()">
</div>
<div id="buttonsDataset">
<h3>These Buttons Are Working With Dataset in JS.</h3>
<label>Getting The Attribute's Current Value</label><input type="button" value="Execute JS Function" onclick="getValueDataset()">
<br>
<label>Setting The Attribute Value</label><input type="button" value="Setting the inserted Value To the custom Attribute" onclick="setValueDataset()">
<br>
<label>Removing The Attribute Itself!</label><input type="button" value="Remove The Custom Attribute From DIV Tag" onclick="removeAttrDataset()">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment