Js подключить css файл
Обновлено: 07.07.2024
- это стандарт визуального представления HTML-документов. Каскадные таблицы стилей предназначены для использования дизайнерами: они позволяют точно определить шрифты, цвета, величину полей, выравнивание, параметры рамок и даже координаты элементов в документе.
Но они также представляют интерес и для программистов, пишущих на клиентском языке JavaScript, потому что позволяют воспроизводить анимационные эффекты, такие как плавное появление содержимого документа из-за правого края, например, или сворачивание и разворачивание списков, благодаря чему пользователь получает возможность управлять объемом отображаемой информации.
Управление встроенными стилями
Самый простой способ управления стилями CSS - это манипулирование атрибутом style отдельных элементов документа. Как и для большинства HTML-атрибутов, атрибуту style соответствует одноименное свойство объекта Element, и им можно манипулировать в сценариях на языке JavaScript. Однако свойство style имеет одну отличительную особенность: его значением является не строка, а объект CSSStyleDeclaration. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style.
Например, чтобы вывести содержимое текстового элемента e крупным, полужирным шрифтом синего цвета, можно выполнить следующие операции для записи желаемых значений в свойства, которые соответствуют свойствам стиля font-size, font-weight и color:
При работе со свойствами стиля объекта CSSStyleDeclaration не забывайте, что все значения должны задаваться в виде строк. В таблице стилей или атрибуте style можно написать:
Чтобы сделать то же самое для элемента e в JavaScript, необходимо заключить все значения в кавычки:
Обратите внимание, что точки с запятыми не входят в строковые значения. Это точки с запятой, употребляемые в синтаксисе языка JavaScript. Точки с запятой, используемые в таблицах стилей CSS, не нужны в строковых значениях, устанавливаемых с помощью JavaScript.
Кроме того, помните, что во всех свойствах позиционирования должны быть указаны единицы измерения. То есть:
Единицы измерения обязательны при установке свойств стиля в JavaScript - так же, как при установке свойств стиля в таблицах стилей.
Многие CSS-свойства стиля, такие как font-size, содержат в своих именах дефис. В языке JavaScript дефис интерпретируется как знак минус, поэтому нельзя записать выражение, приведенное ниже:
Таким образом, имена свойств объекта CSSStyleDeclaration слегка отличаются от имен реальных CSS-свойств. Если имя CSS-свойства содержит дефисы, имя свойства объекта CSSStyleDeclaration образуется путем удаления дефисов и перевода в верхний регистр буквы, непосредственно следующей за каждым из них. Другими словами, CSS-свойство border-left-width доступно через свойство borderLeftWidth, а к CSS-свойству font-family можно обратиться через свойство fontFamily.
Кроме того, когда CSS-свойство, такое как float, имеет имя, совпадающее с зарезервированным словом языка JavaScript, к этому имени добавляется префикс «css», чтобы создать допустимое имя свойства объекта CSSStyleDeclaration. То есть, чтобы прочитать или изменить значение CSS-свойства float элемента, следует использовать свойство cssFloat объекта CSSStyleDeclaration.
Атрибут style HTML-элемента - это его встроенный стиль, и он переопределяет любые правила стилей в таблице CSS. Встроенные стили в целом удобно использовать для установки значений стиля, и именно такой подход использовался во всех примерах выше. Сценарии могут читать свойства объекта CSSStyleDeclaration, представляющего встроенные стили, но они возвращают осмысленные значения, только если были ранее установлены сценарием на языке JavaScript или если HTML-элемент имеет встроенный атрибут style, установивший нужные свойства.
Например, документ может включать таблицу стилей, устанавливающую левое поле для всех абзацев равным 30 пикселам, но если прочитать свойство leftMargin одного из этих элементов, будет получена пустая строка, если только этот абзац не имеет атрибут style, переопределяющий значение, установленное таблицей стилей.
Чтение встроенного стиля элемента представляет особую сложность, когда выполняется чтение свойств стиля, имеющих единицы измерения, а также свойств сокращенной формы записи: сценарий должен включать далеко не простую реализацию синтаксического анализа строк с CSS-стилями, чтобы обеспечить возможность извлечения и дальнейшего использования значений. В целом, встроенный стиль элемента удобно использовать только для установки стилей.
Иногда бывает проще прочитать или записать единственную строку во встроенный стиль элемента, чем обращаться к объекту CSSStyleDeclaration. Для этого можно использовать методы getAttribute() и setAttribute() объекта Element или свойство cssText объекта CSSStyleDeclaration:
Создание анимационных эффектов средствами CSS
Одной из наиболее типичных областей применения CSS является воспроизведение визуальных анимационных эффектов. Реализовать их можно с помощью метода setTimeout() или setInterval(), используя их для организации многократных вызовов функции, изменяющей встроенный стиль элемента.
Ниже показан пример, который демонстрирует две такие функции, shake() и fadeOut(). Функция shake() перемещает, или «встряхивает» (shakes), элемент из стороны в сторону. Ее можно использовать, например, для привлечения внимания пользователя в случае ввода некорректных данных. Функция fadeOut() уменьшает непрозрачность элемента в течение указанного периода времени (по умолчанию 500 миллисекунд), вызывая эффект его растворения до полного исчезновения:
Обе функции, shake() и fadeOut(), принимают необязательную функцию обратного вызова во втором аргументе. Если эта функция указана, она будет вызвана по завершении воспроизведения анимационного эффекта. Элемент, к которому применялся анимационный эффект, будет передан функции обратного вызова в виде аргумента. Следующая разметка HTML создает кнопку, для которой после щелчка на ней воспроизводится эффект встряхивания, а затем эффект растворения:
Обратите внимание, насколько функции shake() и fadeOut() похожи друг на друга. Они обе могут служить шаблонами для реализации похожих анимационных эффектов с использованием CSS-свойств.
Вычисленные стили
Свойство style элемента определяет встроенный стиль элемента. Оно имеет преимущество перед всеми таблицами стилей и с успехом может применяться для установки CSS-свойств для изменения визуального представления элемента. Однако в общем случае к нему нет смысла обращаться, когда требуется узнать фактически примененные к элементу стили. То, что требуется в этом случае, называется вычисленным стилем.
- это набор значений свойств, которые браузер получил (или вычислил) из встроенного стиля и всех правил из всех таблиц стилей, которые применяются к элементу: это набор свойств, фактически используемый при отображении элемента. Подобно встроенным стилям, вычисленные стили представлены объектом CSSStyleDeclaration. Однако в отличие от встроенных стилей, вычисленные стили доступны только для чтения. Эти стили нельзя изменить, но вычисленный объект CSSStyleDeclaration позволяет точно узнать значения свойств стилей, которые браузер использовал при отображении соответствующего элемента.
Получить вычисленный стиль элемента можно с помощью метода getComputedStyle() объекта Window. Первым аргументом этому методу передается элемент, вычисленный стиль которого требуется вернуть. Второй аргумент является обязательным, и в нем обычно передается значение null или пустая строка, но в нем также может передаваться строка с именем псевдоэлемента CSS, таким как «::before», «::after», «:first-line» или «:first-letter»:
Возвращаемым значением метода getComputedStyle() является объект CSSStyleDeclaration, представляющий все стили, применяемые к указанному элементу (или псевдоэлементу). Между объектами CSSStyleDeclaration, представляющими встроенные стили и вычисленные стили, существует множество существенных отличий:
Свойства вычисленного стиля доступны только для чтения.
Свойства, являющиеся краткой формой записи, не вычисляются - только фундаментальные свойства, на которых они основаны. Например, не следует пытаться получить значение свойства margin, вместо этого нужно обращаться к свойствам marginLeft, marginTop и т.д.
Свойство cssText вычисленного стиля не определено.
Работа с вычисленными стилями может оказаться весьма непростым делом, и обращение к ним не всегда возвращает ожидаемую информацию. Рассмотрим в качестве примера свойство font-family: оно принимает список разделенных запятыми имен семейств шрифтов для совместимости. При чтении свойства fontFamily вычисленного стиля вы ждете значение наиболее конкретного стиля font-family, применяемого к элементу. А в этом случае может вернуться такое значение, как «arial,helvetica,sans-serif», которое ничего не говорит о гарнитуре фактически используемого шрифта.
Управление таблицами стилей
До сих пор мы видели, как устанавливать и получать значения CSS-свойств стиля и классы отдельных элементов. Однако существует еще возможность управления самими таблицами стилей CSS. Обычно в этом не возникает необходимости, тем не менее такая возможность иногда бывает полезной, и в этом разделе коротко будут представленные возможные приемы.
При работе с самими таблицами стилей вам придется столкнуться с двумя типами объектов. Первый тип - это объекты Element, представляющие элементы <style> и <link>, которые содержат или ссылаются на таблицы стилей. Это обычные элементы документа, и если в них определить атрибут id, вы сможете выбирать их с помощью метода document.getElementById().
Второй тип объектов - объекты CSSStyleSheet, представляющие сами таблицы стилей. Свойство document.styleSheets возвращает доступный только для чтения объект, подобный массиву, содержащий объекты CSSStyleSheet, представляющие таблицы стилей документа. Если в элементе <style> или <link>, определяющем или ссылающемся на таблицу стилей, определить атрибут title, этот объект будет доступен как свойство объекта CSSStyleSheet с именем, указанным в атрибуте title.
Следующие разделы описывают, какие операции могут выполняться с этими элементами <style> и <link> и объектами таблиц стилей.
Включение и выключение таблиц стилей
Простейший прием работы с таблицами стилей является к тому же самым переносимым и надежным. Элементы <style> и <link> и объекты CSSStyleSheet определяют свойство disabled, доступное сценариям на языке JavaScript для чтения и записи. Как следует из его имени, если свойство disabled принимает значение true, таблица стилей оказывается отключенной и будет игнорироваться браузером.
Это наглядно демонстрирует функция disableStylesheet(), представленная ниже. Если передать ей число, она будет интерпретировать его как индекс в массиве document.styleSheets. Если передать ей строку, она будет интерпретировать ее как селектор CSS, передаст ее методу document.querySelectorAll() и установит в значение true свойство disabled всех полученных элементов:
Получение, вставка и удаление правил из таблиц стилей
В дополнение к возможности включения и отключения таблиц стилей объект CSSStyleSheet также определяет API для получения, вставки и удаления правил стиля из таблиц стилей. IE8 и более ранние версии реализуют несколько иной API, отличный от стандартного, реализуемого другими браузерами.
Как правило, непосредственное манипулирование таблицами стилей редко бывает полезным. Вместо того чтобы добавлять новые правила в таблицы стилей, обычно лучше оставить их статичными и работать со свойством className элемента. В то же время, если необходимо предоставить пользователю возможность полного управления таблицами стилей веб-страницы, может потребоваться организовать динамическое манипулирование таблицами.
Объекты CSSStyleSheet хранятся в массиве document.styleSheets[]. Объект CSSStyle Sheet имеет свойство cssRules[], хранящее массив правил стилей:
В IE это свойство носит имя rules, а не cssRules.
Элементами массива cssRules[] или rules[] являются объекты CSSRule. В стандартном API объект CSSRule может представлять CSS-правила любого типа, включая @-правила, такие как директивы @import и @page. Однако в IE массив rules[] может содержать только фактические правила таблицы стилей.
Объект CSSRule имеет два свойства, которые могут использоваться переносимым способом. (В стандартном API правила, не относящиеся к правилам стилей, не имеют этих свойств, и потому, возможно, вам потребуется пропускать их при обходе таблицы стилей.) Свойство selectorText - это CSS-селектор для данного правила, а свойство style - это ссылка на доступный для записи объект CSSStyleDeclaration, который описывает стили, связанные с этим селектором. Напомню, что CSSStyleDeclaration - это тот же самый тип, который используется для представления встроенных и вычисленных стилей.
Объект CSSStyleDeclaration может применяться для чтения существующих или создания новых стилей в правилах. Нередко при обходе таблицы стилей интерес представляет сам текст правила, а не разобранное его представление. В этом случае можно использовать свойство cssText объекта CSSStyleDeclaration, в котором содержатся правила в текстовом представлении.
В дополнение к возможности получения и изменения существующих правил таблиц стилей имеется возможность добавлять правила в таблицу стилей и удалять их из таблицы. Стандартный прикладной интерфейс определяет методы insertRule() и deleteRule(), позволяющие добавлять и удалять правила:
Браузер IE не поддерживает методы insertRule() и deleteRule(), но определяет практически эквивалентные им функции addRule() и removeRule(). Единственное существенное отличие (помимо имен функций) состоит в том, что addRule() ожидает получить селектор и стиль в текстовом виде в двух отдельных аргументах.
можно ли импортировать таблицы стилей css в html-страницу с помощью Javascript? Если да, то как это можно сделать?
P. S javascript будет размещен на моем сайте, но я хочу, чтобы пользователи могли поместить в <head> тег их веб-сайта, и он должен иметь возможность импортировать файл css, размещенный на моем сервере, на текущую веб-страницу. (и файл css, и файл javascript будут размещены на моем сервере).
вот способ" старой школы", который, надеюсь, работает во всех браузерах. Теоретически, вы бы использовали setAttribute к сожалению, IE6 не поддерживает его последовательно.
этот пример проверяет, был ли CSS уже добавлен, поэтому он добавляет его только один раз.
поместите этот код в файл javascript, попросите конечного пользователя просто включить javascript и убедитесь, что путь CSS является абсолютным, поэтому он загружается из вашего сервера.
вот пример, который использует простой JavaScript для вставки ссылки CSS в head элемент на основе части имени файла URL:
вставьте код непосредственно перед закрытием head тег и CSS будут загружены до отображения страницы. Использование внешнего JavaScript ( .js ) файл вызовет вспышку неустановленного содержимого (FOUC), чтобы появиться.
Если вы используете jquery:
Я думаю, что-то вроде этого скрипта будет делать:
этот файл JS содержит следующий оператор:
адрес javascript и css должен быть абсолютным, если они должны ссылаться на ваш сайт.
многие методы импорта CSS обсуждаются в этом "сказать" нет "для CSS хаки с методами ветвления" статьи.
но " использование JavaScript для динамического добавления CSS портлета стили" в статье упоминается также возможность CreateStyleSheet (собственный метод для IE):
вызовите следующую функцию для динамической загрузки файла CSS или JavaScript.
передать полный путь к файлу с именем как
Я знаю, что это довольно старая нить, но вот мои 5 центов.
есть еще один способ сделать это в зависимости от ваших потребностей.
У меня есть случай, когда я хочу, чтобы файл css был активен только некоторое время. Как переключение css. Активируйте css, а затем после другого события деативируйте его.
вместо того, чтобы загружать css динамически, а затем удалять его, вы можете добавить класс / идентификатор перед всеми элементами в новом css, а затем просто переключить этот класс / идентификатор базовый узел вашего css (например, тег body).
У вас было бы с этим решением больше изначально загруженных файлов css, но у вас есть более динамичный способ переключения макетов css.
Если вы хотите знать (или ждать), пока сам стиль не загрузится, это работает:
вот способ с методом создания элемента jQuery (мое предпочтение) и с обратным вызовом onLoad :
на библиотека YUI может быть то, что вы ищете. Он также поддерживает кросс-доменную загрузку.
В этом уроке расскажу вам, как правильно подключать файлы стилей и скриптов при создании темы WordPress.
Вставить в HTML шаблона теги <link rel=""> или <script src=""></script> – не катит. Потому что в таком случае вы их захардкодите и например у вас не будут работать плагины оптимизации, которые объединяют все стили и скрипты в один файл. Или же у вас не получится перестроить порядок скриптов.
Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.
Пример подключения файла CSS и файла JS
Написал для вас вот такой код, чтобы вам удобно было копировать его отсюда при необходимости:
- При разработке своих тем вставляем код подключения JS / CSS в functions.php , либо в какой-либо произвольный файл, подключаемый также к functions.php через include() / require() .
- Можете также почитать документацию функций wp_enqueue_style() и wp_enqueue_script().
- Не переживайте так из-за того, что я записал функцию не в одну строчку, а в 7 – согласно кодгайду WordPress, мы можем записывать функцию, чтобы каждый её параметр был на новой строке.
Хуки wp_enqueue_scripts, admin_enqueue_scripts и login_enqueue_scripts
И хотя в уроке мы использовали только хук wp_enqueue_scripts , но есть и другие, а вот их полный список:
- wp_enqueue_scripts – для подключения на страницах сайта.
- admin_enqueue_scripts – для подключения на страницах админки WordPress /wp-admin/.
- login_enqueue_scripts – для подключения на странице авторизации / восстановления пароля / регистрации (wp-login.php).
Есть ещё enqueue_block_editor_assets , но давайте немного притормозим, ладно? 😅
Что делать с кэшированием?
Конечно же обновлять кэш браузера после каждого изменения в style.css вообще не особо вариант?
Поэтому мы и воспользуемся 4-м параметром функции, в который мы можем передать версию, осталось только придумать, как передавать её динамически, чтобы можно было бы забыть о кэше на время разработки.
В уроке мы использовали функцию time() , потому что каждый раз она возвращает нам новое значение, каждую следующую секунду.
Давайте сейчас я покажу вам более хитрый, но чуть более правильный метод – мы можем использовать другую PHP функцию filemtime() , которая возвращает также время, но только не время вообще, а время последнего изменения файла! В секундах.
Но как же работает filemtime() ?
Как вы возможно догадались, мы передали в неё что-то вроде пути до файла? Да, это именно путь к файлу на сервере, а не URL. Для того, чтобы убедиться наглядно, можете прямо в index.php попробовать вывести echo dirname( __FILE__ );
Вообще главный аргумент здесь – что, когда мы переносим наши JS файлы в футер, мы делаем наш сайт чуточку быстрее (да, это не влияет сильно (!) на скорость загрузки сайта, однако Google PageSpeed будет счастлив).
Для того, чтобы это сделать, мы производим следующие манипуляции:
В уроке, для того, чтобы сильно вас не загружать, я не стал использовать includes_url() – она возвращает динамически путь к директории wp-includes .
Также обратите внимание, что в этом примере я не стал создавать какую-то отдельную функцию, а прописал её сразу внутри хука! Типа такая анонимная функция – подобная запись, насколько я знаю, не соответствует WordPress кодгайду, но позволит вам каждый раз не напрягать воображение для придумывания названий функций. Такая возможность записи появилась в PHP 5.3, поэтому, если вдруг каким-то чудесный образом у вас более старая версия, не рекомендую так делать.
Ну а главная суть в этом примере – это 5-й параметр функции wp_register_script(), который равен true, а значит скрипт должен подключиться в футере! Этот параметр есть только у функций скриптов, потому что, что бы там не говорил пейджспид, перенос CSS в футер – это бред.
Очень простое и полезное API есть в продукте, которое достойно отдельного внимания! Наверняка еще не все знают
Для оформления и реализации front-end логики компонента, в его шаблоне доступны не обязательные файлы
- style.css , который определяет стили, необходимые данному шаблону
- script.js , который определяет и подключает яваскрипты, необходимые данному шаблону.
Не всегда их хватает. Для подключения внешних css/js можно было пойти разными путями
- В шаблоне "подключить жестко" инлайном, что совсем не спортивно
- Архитектурно правильный способ (но его уже можно считать устаревшим), для тех кто знаком с устройством компонента,
создать component_epilog.php:
- И теперь простой и самый правильный способ
в template.php :
В комплекте идёт поддержка кеширования не только текущего шаблона, но и родительского.
Не зависимо от кеша, файлы всегда будут с шаблоном! Ура!
Новая страничка в курсе разработчика. Поделитесь с коллегами
а в component_epilog.php будет работать?
Нет, не будет.Да и зачем?
Это же не аналог метода.
Тут главная фича в том, что можно вызывать в кешируемой области. Технически - вы можете вызвать эти API в component_epilog.php и они сработают.
Нужно использовать не
Так как в файле шаблона $this это объект CBitrixComponentTemplate, к которому и принаджлежит метод addExternalCss, а в component_epilog.php $this это CBitrixComponent , через который можно получить и объект шаблона.
Но не уверен что это правильный подход, методы же для шаблона разработаны
Теперь у CBitrixComponent ($this в component_epilog) есть метод getTemplate()
за эти функцию спасибо
очень полезны
Но когда только мы эти функции встретили,
из ядра нашего продукта мы выбросили целый вагон кода. В общем, эти функции для нас оказались настоящей находкой
за последние несколько лет, это был действительно подарок от Битрикс
Как сделать так, чтобы, например, при ajax-запросе компонента штатные style.css и script.js подключились тут же инлайново?
P.S. Создание отдельного шаблона сайта для ajax запросов компонентов - не наш метод А почему вместо дефолтного подключения style.css и script.js не подключать дефолтно всё из папки css и js? Потому, что это в большинстве случаев не нужно.
Потому, что там могут лежать файлы, которые не нужно подключать сразу.
Потому, что там могут лежать подпапки и как определить что нужно брать из подпапок? имхо, в компоненте совсем не должно быть своих css,js Очень сильно от проекта зависит. Да, сейчас верстка делается так, что общие js и стили на весь сайт.
Но если у вас есть слайдер, для которого используется и только для него определенный js, то логичке положить все это вместе с компонентом.
Плохо на всех страницах сайта подключать все, что может понадобиться, а использоваться половина кода может только на одной определенной странице. Во времена когда все css\js мержатся в 1 файл, оптимизируются и компресуются, выносить небольшой фрагмент js\css просто бессмысленно, или вы хотите создать 2 варианта js\css по 3мб и 2.9мб, и скормить пользователю вместо 1 раза 3мб. Поэтому компонентные js\css весьма спорная затея. Бывают разные ситуации. Например, для всего сайта достаточно 100 кб стилей и js, а для одного сложного раздела целесообразнее весь этот ворох в несколько мегабайт подключать только в этом разделе.
Ну и плюс, если через маркетплейс реализуете некоторые компоненты, то у вас внутри этих компонентов должен быть законченный функционал.
Это возможность, а уже разработчик или кто-то из команды разработчиков принимает решение о целесообразности. 90% сайтов делаемых на заказ на битриксе используют общие стили и скрипты, а не разнесенные по компонентам. И эта готовая функция сделает нам (как минимум) 2 разных набора файлов js\css и заставит скачать 5.9мб данных вместо 3.0 (из примера выше).
| Есть ряд задач, когда нужно выносить - компонент может перемещаться из проекта в проект, модуль в МП |
А если в шаблонах используются одни и те же плагины (css+js) и их много? Например, плагин jqueryUI Календарь, насколько помню, использует основной стиль плагина, тему, основной скрипт и скрипт локализации, т.е. 4 файла - 4 строки вызова ресурсов. А если там несколько плагинов, то будет куча повторяющегося кода?
Если работают несколько разработчиков, то могут вообще подключить одинаковые файлы одни и тех же плагинов из разных шаблонов, что может вызвать непредвиденное поведение.
Если необходимо обновить плагин, то потенциально придется лезть во все шаблоны, где используется плагин и менять пути вызова ресурсов.
Про данные атрибуты разработчики конечно же не знали и не сделали возможность их добавления, как всегда.
async="async"
defer="defer"
Всегда нужна возможность для CSS и JS скриптов передавать массив доп.атрибутов, как перечисленных выше, так и своих.
А чем теперь заменить фукцию $APPLICATION->GetTemplatePath?Некоторые делают так:
Хотелось бы узнать, константы не запретят когда нибудь? Ведь $_REQUEST по какой-то причине внезапно оказался вне закона.
Я и раньше константы с осторожностью использовал, всегда делал так:
Читайте также: