MohirDox

Ko'rinishi

HTML DOM - CSSni o'zgartirish ​

HTML uslubini o'zgartirish ​

HTML DOM JavaScript-ga HTML elementlarining uslubini o'zgartirishga imkon beradi. HTML elementining uslubini o'zgartirish uchun ushbu sintaksisdan foydalaning:

js
document.getElementById(id).style.xususiyat = yangi_uslub

Misol ​

Ushbu misol <p> elementining uslubini o'zgartiradi:

html
<html>
  <body>
    <p id="p2">Salom Dunyo!</p>

    <script>
      document.getElementById('p2').style.color = 'blue'
    </script>
  </body>
</html>

Hodisalardan foydalanish ​

HTML DOM biror hodisa yuz berganda kodni bajarishga imkon beradi. Hodisalar brauzer tomonidan HTML elementlarida "biror narsa sodir bo'lganda" hosil qilinadi:

  • Element ustiga bosilganda
  • Sahifa yuklanganda
  • Kiritish maydonlari o'zgarganda

Ushbu qo'llanmaning keyingi bobida hodisalar haqida ko'proq bilib olasiz.

Misol ​

Foydalanuvchi tugmani bosganda id="id1" bo'lgan HTML elementining uslubini o'zgartirish:

html
<!DOCTYPE html>
<html>
  <body>
    <h1 id="id1">Mening sarlavham 1</h1>

    <button
      type="button"
      onclick="document.getElementById('id1').style.color = 'red'"
    >
      Meni bos!
    </button>
  </body>
</html>

Ko'proq misollar ​

Elementni qanday qilib ko'rinmas qilish mumkin (vizual ko'rsatish yoki ko'rsatmaslik):

html
<input
  type="button"
  value="Matnni yashirish"
  onclick="document.getElementById('p1').style.visibility='hidden'"
/>
<input
  type="button"
  value="Matnni ko'rsatish"
  onclick="document.getElementById('p1').style.visibility='visible'"
/>

HTML DOM Style obyekti ma'lumotnomasi ​

Barcha HTML DOM uslubi (style) xususiyatlari uchun bizning to'liq HTML DOM Style Object Reference ma'lumotnomamizga qarang.