Используйте JavaScript, чтобы получить псевдоэлементы атрибуты
Все знают, как получить значение своего стиля CSS через атрибут стиля элемента, но может ли он получить значение атрибута псевдоэлемента? Да, вы также можете получить доступ к псевдо-элементам на странице, используя JavaScript.
Кода -копия выглядит следующим образом:
// Получить значение цвета .Element: до
var color = window.getComputedStyle (
document.queryselector ('. element'), ': до'
) .getPropertyValue ('color');
// Получить значение содержания. Элемента: до
var content = window.getComputedStyle (
document.queryselector ('. element'), ': до'
) .getPropertyValue ('Content');
Ты это видел? Я могу получить доступ к значению атрибута контента в псевдоэлементе. Если вы хотите создать динамичный, шикарный веб -сайт, это очень полезная техника!
ClassList API
Многие библиотеки инструментов JavaScript имеют AddClass, Removallass и Toggleclass. Чтобы быть совместимыми со старыми браузерами, эти классовые библиотеки используют методы для поиска названия класса элемента, добавления и удаления этого класса, а затем обновить имя класса. На самом деле, есть новый API, который предоставляет методы для добавления, удаления и инвертирования атрибутов класса CSS, называемого ClassList:
Кода -копия выглядит следующим образом:
mydiv.classlist.add ('mycssclass'); // добавляет класс
mydiv.classlist.remove ('mycssclass'); // Удаляет класс
mydiv.classlist.toggle ('mycssclass'); // переключает класс
Большинство браузеров внедряют API ClassList API, и, наконец, IE10 также реализовал его.
Напрямую добавлять и удалять правила стиля в листы стиля
Мы все очень хорошо знакомы с использованием element.style.propertyname для изменения стилей. Использование JavaScript может помочь нам сделать это, но знаете ли вы, как добавить или исправить существующее правило стиля CSS? На самом деле очень просто.
Кода -копия выглядит следующим образом:
Функция addcssrule (лист, селектор, правила, индекс) {
if (sheet.insertrule) {
sheet.insertrule (selector + "{" + rules + "}", index);
}
еще {
Sheet.Addrule (селектор, правила, индекс);
}
}
// Используйте его!
addcssrule (document.stylesheests [0], «заголовок», «float: left»);
Этот метод обычно используется для создания правила нового стиля, но вы можете сделать это, если хотите изменить существующее правило.
Загрузка файлов CSS
Ленивая загрузка изображений, JSON, сценариев и т. Д. - хороший способ ускорить дисплей страницы. Мы можем использовать Curl.js и другие загрузки JavaScript, чтобы отложить загрузку этих внешних ресурсов. Но знаете ли вы, что листы в стиле CSS также могут быть отложены загрузки, и функция обратного вызова будет уведомлена после успешной нагрузки.
Кода -копия выглядит следующим образом:
скручиваться (
[
"Пространство имен/myWidget",
"CSS! Имен пространство/ресурсы/mywidget.css"
],
функция (myWidget) {
// Вы можете работать на MyWidget
// Здесь нет ссылки на этот файл CSS, потому что в этом нет необходимости;
// нам просто нужно, чтобы он был загружен на странице
}
});
Скрипт синтаксиса PrismJS, используемый этим веб -сайтом, является ленивой загрузкой. Когда все ресурсы будут загружены, функция обратного вызова будет запускается, и я могу загрузить ее в функцию обратного вызова. Очень полезно!
CSS Mouse Mount Meat
Атрибут A-Events Actribute события CSS Mouse Pointer очень интересно. Его эффективность очень похожа на JavaScript. Когда вы устанавливаете этот атрибут на None, он может эффективно предотвратить отключение элемента. Вы можете сказать «Ну и что?», Но на самом деле это запрещает любые события JavaScript или функции обратного вызова в этом элементе!
Кода -копия выглядит следующим образом:
.disabled {pointer-events: none; }
Нажмите на этот элемент, и вы обнаружите, что ни одно событие не будет вызвано любым прослушивателем, который вы поместили в этот элемент. Волшебная функция, на самом деле - вам не нужно проверять, существует ли определенный класс CSS, чтобы предотвратить запуск события.
Выше приведено 5 способов взаимодействия с JavaScript и CSS. Если у вас есть лучшие, пожалуйста, скажите мне. Эта статья будет обновляться непрерывно.