Memahami pemaparan dalam penyemak imbas: CSSOM-tutorial js-php.cn

Hei, artikel ini adalah sebahagian daripada siri pemaparan dalam penyemak imbas. Jika anda belum membaca artikel sebelum ini, lihat pautan di bawah:

Memahami pemaparan dalam penyemak imbas: DOM

Dalam artikel lepas, kami meneroka cara HTML diproses oleh penyemak imbas melalui DOM (Document Object Model), yang mentakrifkan struktur halaman web. Walau bagaimanapun, halaman web bukan sahaja diperbuat daripada HTML dan sesuatu yang masih ramai tidak tahu ialah CSS juga mempunyai perwakilan tersendiri dalam bentuk objek, dipanggil CSSOM (Model Objek CSS).

Pelayar menggunakan CSSOM bersama-sama dengan DOM untuk membina halaman, menggabungkan struktur (HTML) dan gaya (CSS), menghasilkan persembahan visual yang harmoni.

Dalam artikel ini, kami akan mendalami pengetahuan kami tentang CSSOM, memahami struktur, kepentingan dan cara ia boleh dimanipulasi.

Apakah CSSOM?

Seperti DOM, CSSOM ialah struktur data hierarki, tetapi fungsinya adalah untuk mewakili CSS dokumen web.

CSSOM dijana oleh penyemak imbas selepas fail gaya dimuatkan dan diproses. Walaupun ia dibina secara berasingan daripada DOM, kedua-duanya berfungsi bersama supaya penyemak imbas boleh memasang halaman dengan struktur (DOM) yang betul dan menggunakan gaya yang sesuai (CSSOM).

Fungsi utama CSSOM adalah untuk menyediakan penyemak imbas "peta" terperinci tentang gaya yang harus digunakan pada setiap elemen pada halaman.

Lihat perwakilan visual CSSOM di bawah:

Entendendo renderização no browser: CSSOM

Dalam kod, perwakilan ini akan kelihatan seperti ini:

body {
  font-size: 16px;
}

div {
  width: 200px;
  height: 100px;
  background: blue;
}

a {
  color: red;
  text-decoration: none;
}

h1 {
  font-weight: bold;
}

Salin selepas log masuk

Dan pokok DOM yang merujuk kepada CSSOM yang kami lihat sebelum ini diwakili seperti berikut:

Entendendo renderização no browser: CSSOM

Memanipulasi CSSOM

Penyemak imbas memberikan kami satu set API yang membolehkan kami memanipulasi CSS menggunakan javascript. Ia serupa dengan API DOM, tetapi untuk CSS dan bukannya HTML.

Menggunakan API ini, kita boleh membaca dan memanipulasi CSS halaman secara dinamik.

Cara paling mudah untuk memanipulasi gaya ialah melalui sifat gaya yang terdapat dalam dokumen.

Untuk mengakses dan memanipulasi elemen CSSOM buat kali pertama, buka konsol penyemak imbas dan jalankan kod berikut:

document.body.style.background = "gray";
console.log(document.body.style.background); // gray

Salin selepas log masuk

Selepas melaksanakan coretan kod di atas, saya mengesyorkan agar anda memeriksa elemen halaman dan menganalisis kandungannya. Perhatikan bahawa sekarang badan kita mempunyai gaya sebaris dan akan kelihatan lebih kurang seperti ini:

body {
  font-size: 16px;
}

div {
  width: 200px;
  height: 100px;
  background: blue;
}

a {
  color: red;
  text-decoration: none;
}

h1 {
  font-weight: bold;
}

Salin selepas log masuk

Kami boleh menambah atau menukar mana-mana sifat CSS pada halaman kami, sentiasa mengikut elemen corak.style.propertyname.

Cara lain untuk memanipulasi gaya sebaris ialah melalui beberapa kaedah yang terdapat dalam gaya.

setProperty: dengan kaedah ini anda boleh menambah atau menukar nilai harta sebaris.

document.body.style.background = "gray";
console.log(document.body.style.background); // gray

Salin selepas log masuk

getPropertyValue: dengan kaedah ini anda boleh mengakses nilai harta sebaris.

<body>



<p>Isso acontece porque alterar a propriedade style de um elemento só tem efeito para estilos inlines.<br>
A mesma lógica se aplica para leitura de propriedades do style. Se você executar o código abaixo não vai ter nenhum retorno, pois nenhum momento definimos a propriedade color usando estilo inline.<br>
</p>

<pre class="brush:php;toolbar:false">console.log(document.body.style.background); // '''

Salin selepas log masuk

removeProperty: dengan kaedah ini anda boleh mengalih keluar harta sebaris.

document.body.style.setProperty("background", "red");

// Agora execute o próximo comando

document.body.style.setProperty("background", "blue");

Salin selepas log masuk

getComputedStyle berfungsi untuk membaca sahaja. Anda akan dapat mengakses maklumat gaya untuk sebarang elemen atau unsur pseudo, tetapi anda tidak akan dapat membuat perubahan.

Bagaimana pula dengan gaya yang tidak sebaris?

Menulis gaya sebaris tidak begitu biasa, jadi kami juga boleh mengakses gaya yang dikira, gaya yang kami tentukan dalam lembaran gaya kami. Untuk melakukan ini, kami boleh terus mengakses dan memanipulasi helaian gaya kami.

Jalankan coretan kod di bawah dalam konsol penyemak imbas anda:

document.body.style.getPropertyValue("background"); // blue

Salin selepas log masuk

Dengannya anda akan mempunyai akses kepada semua helaian gaya yang diisytiharkan dalam kepala html anda.

Lembaran gaya ini dikembalikan dalam format senarai (ia kelihatan seperti tatasusunan, tetapi tidak) dan anda boleh mengaksesnya melalui indeks.

document.body.style.removeProperty("background");

Salin selepas log masuk

Mulai sekarang saya mengesyorkan menjalankan ujian di tempat lain, kerana blog ini dibuat dengan Tailwind CSS dan memanipulasi lembaran gaya menjadi lebih rumit.

Akses halaman ini dan laksanakan arahan dalam konsolnya.

document.styleSheets;

Salin selepas log masuk

Dengan melaksanakan kod di atas, anda akan mempunyai akses kepada semua css yang terdapat dalam helaian gaya. Mengikut logik yang sama seperti di atas, anda boleh mengakses elemen melalui indeks.

document.styleSheets[1];

Salin selepas log masuk

Dalam kod di atas saya sedang mengakses pengisytiharan gaya isi halaman.

document.styleSheets[0].cssRules;

Salin selepas log masuk

Dengan mengakses sifat gaya, kami boleh menambah atau menukar mana-mana sifat CSS, tetapi tanpa menulis gaya sebaris.

Saya mengesyorkan anda bermain lebih sedikit dengan api ini dengan menukar indeks dan menukar CSS elemen yang berbeza.

Kesimpulan

Sama seperti DOM, CSSOM ialah perwakilan berbentuk pokok yang digunakan oleh penyemak imbas untuk proses pemaparan.

Kami boleh mengakses semua CSS halaman dan memanipulasinya secara bebas menggunakan javascript. Mengetahui cara melaksanakan jenis operasi ini adalah penting untuk memahami alatan CSS seperti komponen gaya, linear, dsb.

Ilmu asas adalah yang paling penting, tetapi ia sentiasa diabaikan.
Dalam konteks pembangunan web, mengetahui HTML, CSS, JavaScript dan cara pelayar berfungsi adalah penting. Dengan asas yang kukuh ini, anda akan dapat mempelajari mana-mana teknologi yang diperoleh daripada asas ini.

terima kasih banyak!!

Terima kasih kerana tiba di sini!

Saya harap anda belajar sesuatu yang baharu sepanjang pembacaan ini.

Jumpa lagi nanti!

Rujukan

Model Objek CSS

Membina Model Objek

CSSOM — Model Objek CSS

Pengenalan dan Panduan kepada Model Objek CSS (CSSOM)

Atas ialah kandungan terperinci Memahami pemaparan dalam penyemak imbas: CSSOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!