22 HTML5 attributes

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>

 

License

Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

எளிய தமிழில் HTML by து. நித்யா is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Feedback/Errata

Leave a Reply

Your email address will not be published.