DOM orqali CSS stillarini boshqarish
HTML uslubini o‘zgartirish
HTML DOM JavaScript-ga HTML elementlarining uslubini o‘zgartirish imkonini beradi.
HTML elementining uslubini o‘zgartirish uchun ushbu sintaksisdan foydalaning:
document.getElementById(id).style.property= new style
Misol
<p> elementining stilini o‘zgartiradi:
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
O‘zingiz sinab ko‘ring »
Hodisalardan foydalanish
HTML DOM voqea sodir bo‘lganda kodni bajarishga imkon beradi.
Hodisalar HTML elementlariga "narsalar sodir bo‘lganda" brauzer tomonidan yaratiladi:
- Element bosiladi
- Sahifa yuklanganda
- Kiritish maydonlari o‘zgarganda
Ushbu qo‘llanmaning keyingi bobida voqealar haqida ko‘proq bilib olasiz.
Misol
HTML elementining uslubini id="id1" bilan o‘zgartiring, qachon
foydalanuvchi tugmani bosadi:
<!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>
O‘zingiz sinab ko‘ring »
Qo‘shimcha misollar
Misol
Qanday qilib elementni ko‘rinmas qilish kerak. Elementni ko‘rsatishni xohlaysizmi yoki yo‘qmi?
<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'">
Click Me!</button>
</body>
</html>
O‘zingiz sinab ko‘ring »
HTML DOM Style obyekti bo‘yicha ma’lumotnoma
HTML DOM uslubining barcha xususiyatlari uchun bizning to‘liq HTML DOM uslubi obyekti ma’lumotnomamizga qarang.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!