Bagaimana javascript dapat berinteraksi dengan css?

Pada 2016, Variabel CSS sepenuhnya dapat digunakan di Chrome dan Firefox, dan IE telah menyatakan niat mereka untuk mengimplementasikannya juga.

Seperti banyak fitur JavaScript dan CSS baru, akan sedikit sulit untuk memvisualisasikan apa yang mungkin Anda perlukan atau menggunakan variabel CSS untuk. Bagi sebagian besar dari kita, semua pengalaman kita di dunia pra-variabel, jadi belum tentu jelas untuk apa kita bisa menggunakannya. Kami menemukan satu jawaban yang bagus, berkomunikasi antara JavaScript dan CSS

Apa Itu Variabel CSS?

Variabel CSS (spek) menambahkan dua konsep baru ke CSS. Anda sekarang dapat menentukan properti khusus yang dimulai dengan dua tanda hubung (

a {
  color: var(--main-color)
}

html {
  --main-color: #06c
}

Anda kemudian dapat menggunakannya dengan

a {
  color: var(--main-color)
}

a {
  color: var(--main-color)
}

Bagi siapa pun yang akrab dengan SASS atau bahasa serupa yang dikompilasi ke CSS, keuntungannya jelas, Anda dapat dengan mudah mengubah warna, ukuran, dll. di satu lokasi

Menariknya, variabel mengikuti aturan pewarisan yang sama dari properti CSS lainnya. Misalnya, mungkin kita ingin men-tweak warna utama pada blog kita

.blog-post {
  --main-color: #9b806b
}

Tautan apa pun di dalam bagian posting blog dari halaman itu sekarang akan menjadi warna coklat yang sangat buruk

Menggabungkan variabel CSS dengan ekspresi

a {
  color: var(--main-color)
}

html {
  --header-height: 40px
}

.page-content {
  top: calc(var(--header-height) + 10px)
}

Variabel CSS dan JavaScript

Kami baru-baru ini menemukan polyfill slider Lea Verou yang mengungkapkan penggunaan Variabel CSS yang menarik untuk berkomunikasi antara JavaScript dan CSS

Secara historis, jika Anda ingin mengontrol CSS dengan variabel atau fungsi dalam JavaScript, satu-satunya pilihan Anda adalah menulis CSS dalam JavaScript

5 Cara CSS dan JavaScript Berinteraksi Yang Mungkin Belum Anda Ketahui

Oleh David Walsh  pada tanggal 20 Januari 2014  

• 36

CSS dan JavaScript. garis tampaknya kabur oleh setiap rilis browser. Mereka selalu melakukan pekerjaan yang sangat berbeda tetapi pada akhirnya keduanya adalah teknologi front-end sehingga mereka perlu bekerja sama. Kami memiliki kami. file js dan kami. css, tetapi itu tidak berarti bahwa CSS dan JS tidak dapat berinteraksi lebih dekat daripada yang dimungkinkan oleh kerangka kerja JavaScript dasar. Berikut adalah lima cara JavaScript dan CSS bekerja sama yang mungkin tidak Anda ketahui

Dapatkan Properti Elemen Semu dengan JavaScript

Kita tahu bahwa kita bisa mendapatkan nilai gaya CSS dasar untuk elemen dengan properti style, tetapi bagaimana dengan properti elemen semu?

// Get the color value of .element:before
var color = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('content');

Anda dapat melihat bagaimana saya mengakses nilai properti konten di postingan blog saya tentang Deteksi Status Perangkat. Sangat berguna jika Anda ingin membuat situs yang dinamis dan unik

classList API

Kita semua telah menggunakan metode addClass, removeClass, dan toggleClass di pustaka JavaScript favorit kita. Demi mendukung browser lama, setiap perpustakaan akan mengambil elemen className (dalam format stringnya) dan menambahkan/menghapus kelas, lalu memperbarui string className. Ada API yang lebih baru untuk menambah, menghapus, dan mengalihkan kelas, dan itu disebut classList

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

Tambah dan Hapus Aturan Langsung ke Stylesheets

Kita semua berpengalaman dalam memodifikasi gaya melalui metode

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

function addCSSRule(sheet, selector, rules, index) {
	if(sheet.insertRule) {
		sheet.insertRule(selector + "{" + rules + "}", index);
	}
	else {
		sheet.addRule(selector, rules, index);
	}
}

// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");

Kasus penggunaan yang paling umum adalah membuat lembar gaya baru, tetapi jika Anda ingin memodifikasi lembar gaya yang ada, lakukan saja

Muat File CSS dengan Loader

Sumber daya yang lambat memuat seperti gambar, JSON, dan skrip adalah cara yang bagus untuk mengurangi waktu muat. Kita dapat memuat sumber daya eksternal tersebut dengan pemuat JavaScript seperti curl. js, tetapi tahukah Anda bahwa Anda dapat memuat lembar gaya dengan malas dan mendapatkan pemberitahuan itu dalam panggilan balik yang sama?

curl(
	[
		"namespace/MyWidget",
		"css!namespace/resources/MyWidget.css"
	], 
	function(MyWidget) {
		// Do something with MyWidget
		// The CSS reference isn't in the signature because we don't care about it;
		// we just care that it is now in the page
	}
});

Blog ini malas memuat PrismJS, penyorot sintaks, berdasarkan keberadaan elemen 

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

CSS myDiv.classList.add('myCssClass'); // Adds a class myDiv.classList.remove('myCssClass'); // Removes a class myDiv.classList.toggle('myCssClass'); // Toggles a class _4

Properti

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

.disabled { pointer-events: none; }

Klik pada elemen itu dan panggilan balik

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

Itu hanya lima cara CSS dan JavaScript berinteraksi yang tidak selalu Anda pikirkan. Punya lebih banyak ide?