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!