HTML பாணியை மாற்றுதல்
HTML DOM, JavaScript க்கு HTML உறுப்புகளின் பாணியை மாற்ற அனுமதிக்கிறது.
ஒரு HTML உறுப்பின் பாணியை மாற்ற, இந்த தொடரியலைப் பயன்படுத்தவும்:
document.getElementById(id).style.property= new styleஎடுத்துக்காட்டு
ஒரு <p> உறுப்பின் பாணியை மாற்றுகிறது:
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>நிகழ்வுகளைப் பயன்படுத்துதல்
HTML DOM, ஒரு நிகழ்வு நடக்கும்போது குறியீட்டை இயக்க உங்களை அனுமதிக்கிறது.
HTML உறுப்புகளுக்கு "விஷயங்கள் நடக்கும்போது" உலாவியால் நிகழ்வுகள் உருவாக்கப்படுகின்றன:
- ஒரு உறுப்பு கிளிக் செய்யப்படுகிறது
- பக்கம் ஏற்றப்பட்டது
- உள்ளீட்டு புலங்கள் மாற்றப்படுகின்றன
இந்த டுடோரியலின் அடுத்த அத்தியாயத்தில் நிகழ்வுகளைப் பற்றி மேலும் அறிவீர்கள்.
எடுத்துக்காட்டு
பயனர் ஒரு பொத்தானைக் கிளிக் செய்யும் போது, id="id1" உடன் HTML உறுப்பின் பாணியை மாற்றவும்:
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>மேலும் எடுத்துக்காட்டுகள்
எடுத்துக்காட்டு
ஒரு உறுப்பை கண்ணுக்கு தெரியாததாக மாற்றுவது எப்படி. உறுப்பைக் காட்ட வேண்டுமா இல்லையா?
<input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'">உதவிக்குறிப்பு:
style.visibility='hidden' உறுப்பை மறைக்கிறது ஆனால் இடத்தை வைத்திருக்கிறது, style.display='none' உறுப்பையும் இடத்தையும் மறைக்கிறது.
ஊடாடும் எடுத்துக்காட்டு
கீழே உள்ள பொத்தான்களைக் கிளிக் செய்வதன் மூலம் பாணி மாற்றங்களைக் காண்க:
ஊடாடும் ஆர்ப்பாட்ட உறுப்பு
இந்த உறுப்பின் பாணியை கீழே உள்ள பொத்தான்களைப் பயன்படுத்தி மாற்றவும்.
பயன்படுத்தப்பட்ட JavaScript குறியீடு:
function changeColor(color) {
document.getElementById('demoElement').style.color = color;
}
function toggleVisibility() {
const element = document.getElementById('demoElement');
if (element.style.visibility === 'hidden') {
element.style.visibility = 'visible';
} else {
element.style.visibility = 'hidden';
}
}
function changeBackground(color) {
document.getElementById('demoElement').style.backgroundColor = color;
}
function resetStyle() {
const element = document.getElementById('demoElement');
element.style = '';
}HTML DOM Style பொருள் குறிப்பு
அனைத்து HTML DOM பாணி பண்புகளுக்கும், எங்கள் முழுமையான HTML DOM Style பொருள் குறிப்பைப் பார்க்கவும்.
உரை பண்புகள்
color, fontSize, fontFamily, fontWeight, textAlign, textDecoration
பாக்ஸ் பண்புகள்
width, height, padding, margin, border, borderRadius
பின்னணி பண்புகள்
backgroundColor, backgroundImage, backgroundSize, backgroundPosition
காட்சி பண்புகள்
display, visibility, opacity, zIndex, position, top, left