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