5 způsobů interakce CSS a JavaScriptu, o kterých možná nevíte

CSS a JavaScript: Řádky se zdánlivě rozmazávají každým vydáním prohlížeče. Vždy odváděly velmi odlišnou práci, ale nakonec jsou obě předními technologiemi, takže potřebují úzce spolupracovat. Máme své soubory .js a své .css, ale to neznamená, že CSS a JS nemohou spolupracovat těsněji, než umožňují základní frameworky JavaScriptu. Zde je pět způsobů, jak JavaScript a CSS spolupracují, o kterých možná nevíte!

Získejte vlastnosti pseudoprvků pomocí JavaScriptu

Víme, že pomocí style můžeme získat základní hodnoty stylu CSS pro prvek vlastnost, ale co vlastnosti pseudoprvků? Ano, JavaScript má dokonce přístup i k nim!

// 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');

Jak přistupuji k hodnotě vlastnosti obsahu, můžete vidět v mém příspěvku na blogu o Detekci stavu zařízení. Neuvěřitelně užitečné, pokud chcete vytvářet dynamické, jedinečné stránky!

classList API

Všichni jsme použili addClass , removeClass a toggleClass metod v našich oblíbených JavaScriptových knihovnách. Kvůli podpoře starších prohlížečů by každá knihovna uchopila prvek className (ve svém řetězcovém formátu) a připojení/odebrání třídy, poté aktualizuje className tětiva. K dispozici je novější API pro přidávání, odebírání a přepínání tříd a nazývá se classList:

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

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

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

classList bylo implementováno již dlouhou dobu ve většině prohlížečů, ale toto API zasáhlo IE ve verzi 10.

Přidat a odebrat pravidla přímo do šablon stylů

Všichni jsme dobře obeznámeni s úpravou stylů pomocí element.style.propertyName a použili jsme k tomu sady nástrojů JavaScript, ale věděli jste, že můžete číst a psát pravidla v nových a stávajících šablonách stylů? API je vlastně také docela jednoduché!

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");

Nejběžnějším případem použití je vytvoření nové šablony stylů, ale pokud chcete upravit existující šablonu stylů, jděte do toho.

Načíst soubory CSS pomocí zavaděče

Líné načítání zdrojů, jako jsou obrázky, JSON a skripty, je skvělý způsob, jak zkrátit dobu načítání. Tyto externí zdroje můžeme načíst pomocí zavaděčů JavaScriptu, jako je curl.js, ale věděli jste, že můžete líně načítat šablony stylů a získat toto upozornění v rámci stejného zpětného volání?

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
	}
});

Tento blog líně načítá PrismJS, zvýrazňovač syntaxe, na základě přítomnosti pre Prvky. Jakmile jsou načteny všechny zdroje, včetně šablony stylů, mohu spustit zpětné volání. Užitečné!

CSS pointer-events

CSS' pointer-events vlastnost je zajímavá tím, že se chová téměř jako JavaScript a efektivně deaktivuje prvek, když je hodnota none ale jinak umožní prvku fungovat normálně, když hodnota není none . Možná si říkáte "no a co?!" ale události ukazatele dokonce brání spouštění událostí JavaScriptu!

.disabled { pointer-events: none; }

Klikněte na tento prvek a libovolný addEventListener zpětné volání, které jste umístili na prvek, nebude oheň. Dokonalá vlastnost, opravdu - nemusíte dělat className zkontrolujte, než se rozhodnete, zda něco vypálit na základě přítomnosti ve třídě.

To je jen pět způsobů interakce CSS a JavaScriptu, na které ne vždy myslíte. Máte více nápadů? Prosím, sdílejte je!