Смена css файла js
можно ли импортировать таблицы стилей css в html-страницу с помощью Javascript? Если да, то как это можно сделать?
P. S javascript будет размещен на моем сайте, но я хочу, чтобы пользователи могли поместить в тег их веб-сайта, и он должен иметь возможность импортировать файл 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 может быть то, что вы ищете. Он также поддерживает кросс-доменную загрузку.
I have a page which has in the header that loads the CSS named light.css . I also have a file named dark.css . I want a button to swap the style of the page all together (there are 40 selectors used in css file and some do not match in two files).
How can I remove reference to light.css with JS and remove all the styles that were applied and then load dark.css and apply all the styles from that? I can't simply reset all of the elements, since some of the styles are applied through different css files and some are dynamically generated by JS. Is there a simple, yet effective way to do that without reloading the page? Vanilla JS is preferable, however I will use jQuery for later processing anyways, so jQ is also fine.
I chose Mattew's answer because with that method, I can easily extend the for() loop to handle multiple files and swap light and dark in other scripts/stylesheets.
Вычисленные стили: getComputedStyle
Итак, изменить стиль очень просто. Но как его прочитать?
Например, мы хотим знать размер, отступы, цвет элемента. Как это сделать?
Свойство style оперирует только значением атрибута "style" , без учёта CSS-каскада.
Поэтому, используя elem.style , мы не можем прочитать ничего, что приходит из классов CSS.
Например, здесь style не может видеть отступы:
…Но что, если нам нужно, скажем, увеличить отступ на 20px ? Для начала нужно его текущее значение получить.
Для этого есть метод: getComputedStyle .
element Элемент, значения для которого нужно получить pseudo Указывается, если нужен стиль псевдоэлемента, например ::before . Пустая строка или отсутствие аргумента означают сам элемент.
Результат вызова – объект со стилями, похожий на elem.style , но с учётом всех CSS-классов.
Есть две концепции в CSS:
- Вычисленное (computed) значение – это то, которое получено после применения всех CSS-правил и CSS-наследования. Например, height:1em или font-size:125% .
- Окончательное (resolved) значение – непосредственно применяемое к элементу. Значения 1em или 125% являются относительными. Браузер берёт вычисленное значение и делает все единицы измерения фиксированными и абсолютными, например, height:20px или font-size:16px . Для геометрических свойств разрешённые значения могут иметь плавающую точку, например, width:50.5px .
Давным-давно getComputedStyle был создан для получения вычисленных значений, но оказалось, что окончательные значения гораздо удобнее, и стандарт изменился.
Так что, в настоящее время getComputedStyle фактически возвращает окончательное значение свойства, для геометрии оно обычно в пикселях.
Для правильного получения значения нужно указать точное свойство. Например: paddingLeft , marginTop , borderTopWidth . При обращении к сокращённому: padding , margin , border – правильный результат не гарантируется.
Например, если есть свойства paddingLeft/paddingTop , то что мы получим вызывая getComputedStyle(elem).padding ? Ничего, или, может быть, «сгенерированное» значение из известных внутренних отступов? Стандарта для этого нет.
Есть и другие несоответствия. Например, некоторые браузеры (Chrome) отображают 10px в документе ниже, а некоторые (Firefox) – нет:
Посещённые ссылки могут быть окрашены с помощью псевдокласса :visited .
Но getComputedStyle не даёт доступ к этой информации, чтобы произвольная страница не могла определить, посещал ли пользователь ту или иную ссылку, проверив стили.
JavaScript не видит стили, применяемые с помощью :visited . Кроме того, в CSS есть ограничение, которое запрещает в целях безопасности применять к :visited CSS-стили, изменяющие геометрию элемента. Это гарантирует, что нет обходного пути для «злой» страницы проверить, была ли ссылка посещена и, следовательно, нарушить конфиденциальность.
тумблер media=none
вы можете выбрать узел таблицы стилей с помощью getElementById, querySelector, etc.
используя jquery, вы можете определенно поменять файл css. Сделайте это при нажатии кнопки.
или Сэм, это тоже работает. Вот синтаксис jQuery.
если вы установили ID на элементе link
вы можете настроить его с помощью Javascript
вот более подробный пример:
этот вопрос довольно старый, но я бы предложил подход, который здесь не упоминается, в котором вы будете включать оба файла CSS в HTML, но CSS будет похож на
свет.в CSS
и темный.в CSS будет как
basicall каждый селектор в темноте.css будет ребенком .dark_layout
тогда все, что вам нужно сделать, это изменить класс элемента тела, если кто-то решит изменить тема сайта.
вы также можете добавить CSS анимации для фонов и цветов, что делает переход очень плавный.
использование jquery .attr () вы можете установить href вашего тег link .я.е
может быть, я думаю слишком сложно,но так как принятый ответ не работал для меня, я думал, что поделюсь своим решением.
история:
То, что я хотел сделать, это включить различные "скины" моей страницы в голове в качестве дополнительных таблиц стилей, которые добавляются в "основной" стиль и переключают их, нажав кнопку на странице (без настроек браузера или вещей).
:
Я думал, что решение @sam было очень элегантным, но оно вообще не работало для меня. По крайней мере, часть проблемы заключается в том, что я использую один основной файл CSS и просто добавляю другие сверху как "скины", и поэтому мне пришлось сгруппировать файлы с помощью отсутствует 'title' собственность.
вот что я придумал.
Сначала добавьте все "скины" в голову, используя "alternate":
обратите внимание, что я дал основной CSS-файл title= 'main' , а все остальные имеют и нет заголовка.
Для переключения скинов я использую jQuery. Я оставьте это пуристам, чтобы найти элегантную версию VanillaJS:
он выполняет итерацию по всем доступным скинам, принимает (скоро) активный, устанавливает заголовок в "main" и активирует его. Все остальные скины отключены, а заголовок удален.
у меня есть эти переменные CSS для управления цветами моего проекта, чтобы я мог делать тематику.
однако независимо от того, как я пытаюсь изменить атрибут(две прокомментированные строки пытались отдельно), ближайший, который я получаю, возвращает недопустимый атрибут.
оказывается, изменение переменных CSS возможно с помощью el.style.cssText свойства, или el.style.setProperty или el.setAttribute методы. В ваших фрагментах кода el.setAttribute используется неправильно, что вызывает ошибки. Вот правильный путь:
демо
следующая демонстрация определяет цвет фона с помощью переменной CSS, а затем изменяет его с помощью фрагмента JS через 2 секунды после загрузки.
это будет работать только в браузерах, поддерживающих переменные CSS, очевидно.
Если вы используете :root :
это будет documentElement.
вы можете просто использовать стандартный способ установки произвольных свойств CSS: setProperty
Element style
Свойство elem.style – это объект, который соответствует тому, что написано в атрибуте "style" . Установка стиля elem.style.width="100px" работает так же, как наличие в атрибуте style строки width:100px .
Для свойства из нескольких слов используется camelCase:
Стили с браузерным префиксом, например, -moz-border-radius , -webkit-border-radius преобразуются по тому же принципу: дефис означает заглавную букву.
тумблер rel=alternate
мой личный подход
я реализовал CSSGlobalVariables крошечный (для облегчения доступа и манипуляции.
любое изменение, примененное к свойствам объекта, автоматически преобразуется в переменные CSS.
собственное решение
на стандартные способы для получения / установки переменных CSS3 являются .setProperty() и .getPropertyValue() .
если ваши переменные являются глобалами (объявленными в :root ), вы можете использовать следующее, Для получения и установки их значений.
однако геттер будет возвращать только значение var, если было установлено, используя .setProperty() . Если был установлен через объявление CSS, вернет undefined . Проверить его в пример:
чтобы избежать неожиданного поведения, вы должны использовать getComputedStyle() способ , перед вызовом .getPropertyValue() . Геттер потом посмотрел вот это :
на мой взгляд, доступ к переменным CSS должен быть более простым, быстрым, интуитивно понятным и естественным.
Toggle media=none
You can select a stylesheet node with getElementById, querySelector, etc.
@sam now I am sorry that I can't accept an answer on somebody else's question :). only, is there any impact on page's performance? Is the disabled link ignored by the browser before that attribute is set to false?
@dzenesiz browsers can skip downloading an alternate stylesheet until it's needed but I don't know how they actually behave.
Just to clarify what @Daniel said, the HTML attribute is non standard, BUT according to Mozilla, the DOM property IS. So toggling it with javascript in the way described above is, in fact, standard-compliant. Unless I'm missing something this should be the accepted answer.
The CSS Object Model says this about the disabled flag: "Note: Even when unset it does not necessarily mean that the CSS style sheet is actually used for rendering". It's probably the reason why the answer works on Firefox, but not on Webkit & Blink (Epyphany & Chromium).
You can create a new link, and replace the old one with the new one. If you put it in a function, you can reuse it wherever it's needed.
For simplicity, I used inline javascript. In production you would want to use unobtrusive event listeners.
If you're wanting to pull a live-reload type of thing, this is probably the way to go since the href may be the same and the browser may not actually do anything if the href hasn't actually changed.
while switching css files, the gap in downloading the file and rendering the styles leaves the html without styles. I guess, there should be a default stylesheet, which adds basic styles, always there. Mobile browsers simply take much time to replace the css style sheet. Also the index of link might vary in different pages, given a static website generated by jekyll
You could do an absolute URL to get around pages being in different folders or whatnot. I like the idea of a default style sheet to prevent the FOUC from showing. Nice tip!
If you set an ID on the link element
you can target it with Javascript
Here's a more thorough example:
This question is pretty old but I would suggest an approach which is not mentioned here, in which you will include both the CSS files in the HTML, but the CSS will be like
light.css
and dark.css will be like
basicall every selector in dark.css will be a child of .dark_layout
Then all you need to do is to change the class of body element if someone selects to change the theme of the website.
You can also add CSS animations for backgrounds and colors which makes the transition highly smooth.
Using jquery you can definitely swap the css file. Do this on button click.
Or as sam's answer, that works too. Here is the jquery syntax.
it could be better, but i like how you've cleanly defined sam's jQ portion & helped me understand everything clearly.
Using jquery .attr() you can set href of your link tag .i.e
Maybe I'm thinking too complicated, but since the accepted answer was not working for me I thought I'd share my solution as well.
Story:
What I wanted to do was to include different 'skins' of my page in the head as additional stylesheets that where added to the 'main' style and switch them by pressing a button on the page (no browser settings or stuff).
Problem:
I thought @sam's solution was very elegant but it did not work at all for me. At least part of the problem is that I'm using one main CSS file and just add others on top as 'skins' and thus I had to group the files with the missing 'title' property.
Here is what I came up with.
First add all 'skins' to the head using 'alternate':
Note that I gave the main CSS file the title='main' and all others have a and no title.
To switch the skins I'm using jQuery. I leave it up to the purists to find an elegant VanillaJS version:
What it does is it iterates over all available skins, takes the (soon) active one, sets the title to 'main' and activates it. All other skins are disabled and title is removed.
До того, как начнёте изучать способы работы со стилями и классами в JavaScript, есть одно важное правило. Надеемся, это достаточно очевидно, но мы всё равно должны об этом упомянуть.
Как правило, существует два способа задания стилей для элемента:
- Создать класс в CSS и использовать его:
- Писать стили непосредственно в атрибуте style : .
JavaScript может менять и классы, и свойство style .
Например, использование style является приемлемым, если мы вычисляем координаты элемента динамически и хотим установить их из JavaScript:
В других случаях, например, чтобы сделать текст красным, добавить значок фона – описываем это в CSS и добавляем класс (JavaScript может это сделать). Это более гибкое и лёгкое в поддержке решение.
Задачи
Следите за единицами измерения
Не забудьте добавить к значениям единицы измерения.
Например, мы должны устанавливать 10px , а не просто 10 в свойство elem.style.top . Иначе это не сработает:
Пожалуйста, обратите внимание, браузер «распаковывает» свойство style.margin в последних строках и выводит style.marginLeft и style.marginTop из него.
Toggle rel=alternate
Set and toggle disabled
8 Answers 8
You can include all the stylesheets in the document and then activate/deactivate them as needed.
In my reading of the spec, you should be able to activate an alternate stylesheet by changing its disabled property from true to false, but only Firefox seems to do this correctly.
So I think you have a few options:
Итого
Для управления классами существуют два DOM-свойства:
- className – строковое значение, удобно для управления всем набором классов.
- classList – объект с методами add/remove/toggle/contains , удобно для управления отдельными классами.
Чтобы изменить стили:
Свойство style является объектом со стилями в формате camelCase. Чтение и запись в него работают так же, как изменение соответствующих свойств в атрибуте "style" . Чтобы узнать, как добавить в него important и делать некоторые другие редкие вещи – смотрите документацию.
Свойство style.cssText соответствует всему атрибуту "style" , полной строке стилей.
Для чтения окончательных стилей (с учётом всех классов, после применения CSS и вычисления окончательных значений) используется:
- Метод getComputedStyle(elem, [pseudo]) возвращает объект, похожий по формату на style . Только для чтения.
Создать уведомление
Напишите функцию showNotification(options) , которая создаёт уведомление: с заданным содержимым. Уведомление должно автоматически исчезнуть через 1,5 секунды.
Пример объекта options :
Используйте CSS-позиционирование для отображения элемента в заданных координатах. Исходный документ имеет необходимые стили.
у меня есть страница, которая имеет в заголовке, который загружает CSS с именем light.css . У меня также есть файл с именем dark.css . Я хочу, чтобы кнопка меняла стиль страницы все вместе (в css-файле используется 40 селекторов, а некоторые не совпадают в двух файлах).
Как удалить ссылку на light.css С помощью JS и удалите все стили, которые были применены, а затем загрузите dark.css и применить все стили из этого? Я не могу просто сбросить все элементы, так как некоторые из них стили применяются через различные файлы css, а некоторые динамически генерируются JS. Есть простой, но эффективный способ сделать это без перезагрузки страницы? Vanilla JS предпочтительнее, однако я буду использовать jQuery для последующей обработки в любом случае, поэтому jQ также в порядке.
Вы можете создать новую ссылку и заменить старую на новую. Если вы поместите его в функцию, вы можете использовать его везде, где это необходимо.
для простоты я использовал встроенный javascript. В производстве вы хотели бы использовать ненавязчивые прослушиватели событий.
вы можете включить все таблицы стилей в документ, а затем активировать/деактивировать их по мере необходимости.
в моем чтении спецификации, вы должны быть в состоянии активируйте альтернативную таблицу стилей, изменив ее disabled свойство от true до false, но только Firefox, похоже, делает это правильно.
поэтому я думаю, что у вас есть несколько вариантов:
className и classList
Изменение класса является одним из наиболее часто используемых действий в скриптах.
Когда-то давно в JavaScript существовало ограничение: зарезервированное слово типа "class" не могло быть свойством объекта. Это ограничение сейчас отсутствует, но в то время было невозможно иметь свойство elem.class .
Поэтому для классов было введено схожее свойство "className" : elem.className соответствует атрибуту "class" .
Если мы присваиваем что-то elem.className , то это заменяет всю строку с классами. Иногда это то, что нам нужно, но часто мы хотим добавить/удалить один класс.
Для этого есть другое свойство: elem.classList .
elem.classList – это специальный объект с методами для добавления/удаления одного класса.
Так что мы можем работать как со строкой полного класса, используя className , так и с отдельными классами, используя classList . Выбираем тот вариант, который нам удобнее.
- elem.classList.add/remove("class") – добавить/удалить класс.
- elem.classList.toggle("class") – добавить класс, если его нет, иначе удалить.
- elem.classList.contains("class") – проверка наличия класса, возвращает true/false .
Кроме того, classList является перебираемым, поэтому можно перечислить все классы при помощи for..of :
Сброс стилей
Иногда нам нужно добавить свойство стиля, а потом, позже, убрать его.
Например, чтобы скрыть элемент, мы можем задать elem.style.display = "none" .
Затем мы можем удалить свойство style.display , чтобы вернуться к первоначальному состоянию. Вместо delete elem.style.display мы должны присвоить ему пустую строку: elem.style.display = "" .
Если мы установим в style.display пустую строку, то браузер применит CSS-классы и встроенные стили, как если бы такого свойства style.display вообще не было.
Обычно мы используем style.* для присвоения индивидуальных свойств стиля. Нельзя установить список стилей как, например, div.style="color: red; width: 100px" , потому что div.style – это объект, и он доступен только для чтения.
Для задания нескольких стилей в одной строке используется специальное свойство style.cssText :
Это свойство редко используется, потому что такое присваивание удаляет все существующие стили: оно не добавляет, а заменяет их. Можно ненароком удалить что-то нужное. Но его можно использовать, к примеру, для новых элементов, когда мы точно знаем, что не удалим существующий стиль.
То же самое можно сделать установкой атрибута: div.setAttribute('style', 'color: red. ') .
установить и переключить disabled
Читайте также: