baghayi/Custom Attributes

## Custom Attributes
<!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>
	<!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>