HTML-ல் உள்ள பல்வேறு tags-ன் தன்மையைத் தீர்மானிக்க attributes பயன்படுகின்றன. இத்தகைய attributes-க்கு பெயரும் (name) மதிப்பும் (value) இருக்கும்.
உதாரணம்: <p class="test">...</p>
இவற்றை basic attributes, custom data attributes என இருவகையாகப் பிரிக்கலாம்.
1. Basic attributes:
id :-
இது html file-ல் உள்ள ஒவ்வொரு tag-க்கும் ஒரு பெயரைத் தருகிறது. இந்த பெயரைப் பயன்படுத்தி css மற்றும் javascript-ல் ஒவ்வொரு tag-ஐயும் அணுகலாம்.
Class :-
ஒரே பண்புகளைக் கொண்ட பல்வேறு tags-ஐ class மூலம் பெயரிடலாம். அவ்வாறே ஒரே class name-ஐக் கொண்டு பல்வேறு tags-ஐயும் குறிப்பிடலாம்.
Style :-
Inline css மூலம் tags-ன் வெளிப்பாட்டை அழகுபடுத்த உதவுகிறது.
உதாரணம்:
<div class="styles" id="myDiv">
/*...*/
</div>
2. Custom data attributes:
நமது தேவைக்கேற்றபடி புதுப்புது attributes-ஐ சேர்த்துக்கொள்வதே custom data attributes எனப்படும். இது data-name = value என்றவாறு இருக்கும். அதாவது data- எனத் தொடங்கி எந்தப் பெயரை வேண்டுமானாலும் கொடுக்கலாம். இத்தகைய custom data attributes-ஐ css, javascript கொண்டு அணுகலாம்.
உதாரணம்:
<div id="customDiv" data-type="programming" data-level="senior">
/*...*/
</div>
ஒரு attribute-ன் மதிப்பினை javascript (js) கொண்டு பெறுதல்:
ஒரு html5 element-ஐ js கொண்டு அணுகுவதற்கு அதற்கு ஒரு unique id வேண்டும். பின்னர் getElementbyId() எனும் js function கொண்டு அதை அணுக்கலாம்.
var mydiv=document.getElementById('customDiv')
இது பின்வரும் html5 element-ஐ அணுகுகிறது.
<div id="customDiv" data-type="programming" data-level="senior">
/*...*/
</div>
இந்த custom மதிப்புகளை பின்வரும் இரு வழிகளில் பெறலாம்.
1. getattribute() method
var mydiv=document.getElementById('customDiv')
//Using getAttribute() property
var type=mydiv.getAttribute("data-type"); //returns "programming"
customDiv.setAttribute("data-type", "testing"); //changes "data-type" to "testing"
customDiv.removeAttribute("data-type"); //removes "data-type" attribute entirely
2. dataset property ஐ அணுக
//Using JavaScript's dataset property
var type=mydiv.dataset.type; //returns "programming"
customDiv.dataset.type=testing; //changes "data-brand" to "testing"
customDiv.dataset.type=null; //removes "data-brand" attribute
முழு உதாரணம் இங்கே
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<meta charset="utf-8" />
</head>
<body>
<div id=”customDiv” data-type="programming" data-level="senior">
</div>
<script>
var type=mydiv.getAttribute("data-type");
customDiv.setAttribute("data-type", "testing");
customDiv.removeAttribute("data-type");
</script>
</body>
</html>
