Смена css файла js
легко установить встроенные значения CSS с помощью javascript. Если я хочу изменить ширину и у меня есть html, как это:
все, что мне нужно сделать, это:
это изменит встроенные значения таблицы стилей. Обычно это не проблема, потому что встроенный стиль переопределения стилей. Пример:
используя этот Javascript:
Я получаю следующее:
это проблема, потому что не только я не хочу менять встроенные значения, если я ищу ширину, прежде чем установить ее, когда у меня есть:
возвращаемое значение равно Null, поэтому, если у меня есть Javascript, который должен знать ширину чего-то, чтобы сделать некоторую логику (я увеличиваю ширину на 1%, а не до определенного значения), возвращая Null, когда я ожидаю, что строка "50%" на самом деле не работает.
Итак, мой вопрос: у меня есть значения в стиле CSS, которые не расположены в строке, как я могу получить эти значения? Как я могу изменить стиль вместо встроенных значений, учитывая идентификатор?
ОК, похоже, вы хотите изменить глобальный CSS так, что будет эффективно изменить все элементы сетчатого стиля сразу. Я недавно узнал, как это сделать сам от Шон Олсон учебник. Вы можете напрямую ссылаться на его код здесь.
Итак:
вы можете получить стили через document.styleSheets . Это фактически вернет массив всех таблиц стилей на Вашей странице, но вы можете сказать какой из них вы находитесь на через document.styleSheets[styleIndex].href собственность. После того, как вы нашли таблицу стилей, которую вы хотите изменить, вам нужно получить массив правил. Это называется " правила "в IE и" cssRules " в большинстве других браузеров. Способ сказать, что CSSRule вы находитесь на находится у selectorText собственность. Рабочий код выглядит примерно так:
Дайте мне знать, как это работает для вас, и, пожалуйста, прокомментируйте, если вы видите какие-либо ошибки.
Я не знаю, почему другие решения пройти через весь список стилей документа. Это создает новую запись в каждой таблице стилей, что является неэффективным. Вместо этого мы можем просто добавить новую таблицу стилей и просто добавить туда наши желаемые правила CSS.
обратите внимание, что мы можем переопределить даже встроенные стили, установленные непосредственно на элементах, добавив"!важно" к стоимости объекта недвижимости, если там уже существуют более конкретные"!важные " объявления стиля для это свойство.
У меня недостаточно репутации, чтобы комментировать, поэтому я отформатирую ответ, но это всего лишь демонстрация рассматриваемой проблемы.
Кажется, когда стили элементов определены в таблицах стилей, они не видны getElementById("someElement").стиль
этот код иллюстрирует проблему. код снизу на jsFiddle.
в тесте 2 при первом вызове левое значение элементов не определено, и поэтому то, что должно быть простым переключателем, запутывается. Для моего использования я буду определять свои важные значения стиля inline, но это, похоже, частично нарушает цель таблицы стилей.
вот код страницы.
Я надеюсь, что это поможет осветить проблему.
пропустить
вы можете получить "вычисленные" стили любого элемента.
IE использует что-то под названием "currentStyle", Firefox (и я предполагаю, что другие "стандартные совместимые" браузеры) использует "defaultView.getComputedStyle".
для этого вам нужно написать кросс-браузерную функцию или использовать хорошую структуру Javascript, такую как prototype или jQuery (поиск "getStyle" в файле прототипа javascript и "curCss" в файле javascript jquery).
что сказал, Если вам нужно высота или ширина вы, вероятно, должны использовать элемент.смещение и элемент.offsetWidth.
возвращаемое значение равно Null, поэтому если у меня есть Javascript, который должен знать ширину чего-то, чтобы сделать некоторую логику (я увеличиваю ширину на 1%, а не до определенного значения)
имейте в виду, если вы добавите встроенный стиль к рассматриваемому элементу, он может действовать как значение "по умолчанию" и будет читаться Javascript при загрузке страницы, так как это встроенный стиль элемента свойство:
у меня есть страница, которая имеет <link> в заголовке, который загружает CSS с именем light.css . У меня также есть файл с именем dark.css . Я хочу, чтобы кнопка меняла стиль страницы все вместе (в css-файле используется 40 селекторов, а некоторые не совпадают в двух файлах).
Как удалить ссылку на light.css С помощью JS и удалите все стили, которые были применены, а затем загрузите dark.css и применить все стили из этого? Я не могу просто сбросить все элементы, так как некоторые из них стили применяются через различные файлы css, а некоторые динамически генерируются JS. Есть простой, но эффективный способ сделать это без перезагрузки страницы? Vanilla JS предпочтительнее, однако я буду использовать jQuery для последующей обработки в любом случае, поэтому jQ также в порядке.
Вы можете создать новую ссылку и заменить старую на новую. Если вы поместите его в функцию, вы можете использовать его везде, где это необходимо.
для простоты я использовал встроенный javascript. В производстве вы хотели бы использовать ненавязчивые прослушиватели событий.
вы можете включить все таблицы стилей в документ, а затем активировать/деактивировать их по мере необходимости.
в моем чтении спецификации, вы должны быть в состоянии активируйте альтернативную таблицу стилей, изменив ее disabled свойство от true до false, но только Firefox, похоже, делает это правильно.
поэтому я думаю, что у вас есть несколько вариантов:
тумблер rel=alternate
установить и переключить disabled
тумблер 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" и активирует его. Все остальные скины отключены, а заголовок удален.
У меня есть страница с <link> в заголовке, которая загружает CSS с именем light.css . У меня также есть файл с именем dark.css . Я хочу кнопку, чтобы поменять стиль страницы все вместе (есть 40 селекторов, используемых в файле CSS, и некоторые не совпадают в двух файлах).
Как я могу удалить ссылку на light.css с помощью JS и удалить все примененные стили, а затем загрузить dark.css и применить все стили из этого? Я не могу просто сбросить все элементы, так как некоторые стили применяются через разные CSS-файлы, а некоторые динамически генерируются JS. Есть ли простой, но эффективный способ сделать это без перезагрузки страницы? Vanilla JS предпочтительнее, однако я все равно буду использовать jQuery для дальнейшей обработки, так что jQ тоже подойдет.
Вы можете создать новую ссылку и заменить старую на новую. Если вы поместите его в функцию, вы можете использовать его там, где это необходимо.
Для простоты я использовал встроенный JavaScript. В производстве вы хотели бы использовать ненавязчивые слушатели событий.
Этот вопрос довольно старый, но я хотел бы предложить подход, который здесь не упоминается, в котором вы включите оба файла CSS в HTML, но CSS будет похож на
И dark.css будет как
В основном каждый селектор в dark.css будет потомком .dark_layout
Тогда все, что вам нужно сделать, это изменить класс элемента body, если кто-то выберет изменить тему сайта.
Вы также можете добавить CSS-анимацию для фона и цвета, что делает переход очень плавным.
Используя jquery, вы определенно можете поменять файл css. Сделайте это по нажатию кнопки.
Или как ответ Сэма, это тоже работает. Вот синтаксис JQuery.
Используя jquery .attr () , вы можете установить href вашего тега link .i.e
Если вы установите идентификатор на элементе ссылки
Вы можете нацелить его с помощью Javascript
Вот более подробный пример:
Вы можете включить все таблицы стилей в документ, а затем активировать / деактивировать их по мере необходимости.
Читая эту спецификацию, вы сможете активировать альтернативную таблицу стилей, изменив ее свойство disabled с true на false, но только Firefox, кажется, делает это правильно.
Поэтому я думаю, что у вас есть несколько вариантов:
Переключить rel=alternate
Установить и переключить disabled
Переключить media=none
Вы можете выбрать узел таблицы стилей с помощью getElementById, querySelector и т. д.
Может быть, я думаю, что слишком сложно, но так как принятый ответ не работает для меня, я подумал, что поделюсь своим решением.
История :
То, что я хотел сделать, это включить различные «скины» моей страницы в заголовок в качестве дополнительных таблиц стилей, которые были добавлены к «основному» стилю, и переключать их, нажимая кнопку на странице (без настроек браузера и прочего).
Проблема:
Я думал, что решение @ sam было очень элегантным, но у меня оно не сработало. По крайней мере, часть проблемы заключается в том, что я использую один основной файл CSS и просто добавляю другие сверху в качестве «скинов», и поэтому мне пришлось сгруппировать файлы со свойством отсутствует «заголовок» .
Вот что я придумал.
Сначала добавьте все «скины» в голову, используя «alternate»:
Обратите внимание, что я дал основному CSS-файлу title = 'main', а все остальные имеют и не имеют заголовка.
Для переключения скинов я использую jQuery. Я оставляю за пуристами возможность найти элегантную версию VanillaJS:
Что он делает, так это перебирает все доступные скины, берет (скоро) активный, устанавливает заголовок 'main' и активирует его. Все остальные скины отключены, а заголовок удален.
Как правило, начинающие изучать веб-разработку люди уже знают, как легко можно поменять внешний вид элемента с помощью CSS стилей. Но менять стили можно и через JavaScript. Когда же наступает необходимость это делать через JavaScript? Первое, что приходит в голову - это для создании анимаций.
Изменение стилей через CSS
У нас есть черный заголовок в розовой рамке. За внешний вида заголовка отвечают CSS стили.
//CSS код
.container width: 400px;
border: 10px solid plum;
margin: 20px auto;
>
Если мы хотим изменит цвет у заголовка с черного на фиолетовый, то идем в CSS код и вручную заменяем значение у свойства color.
Заголовок стал фиолетовый.
Изменение стилей через JavaScript
Но мы хотим большего взаимодействия с пользователем. Чтобы цвет заголовка менялся вследствии наступления какого-нибудь события (клика мыши). Изменим наш заголовок на фиолетовый через JavaScript. Действуем уже по отработанному алгоритму:
- Получить элемент
- Обратится к свойству элемента
- Установит новое значение
Найдем заголовок по названию селектора и поместим его в переменную headingElement для дальнейших манипуляций. Затем получим доступ к его атрибуту style и укажем нужное нам свойство color, которое собираемся изменить. То есть, мы обращаемся к свойству color у стиля того элемента, который лежит а переменной headingElement и устанавливаем ему новое значение - фиолетовый цвет. В записи мы используем две точки, потому что у нас два объекта. Первый объект сам элемент h1, а второй объект - style, в свойствах которого хранятся все стили элемента h1.
Цвет заголовка опять поменялся на фиолетовый.
Названия свойств
Теперь попробуем изменить цвет рамки у заголовка. Действуем по аналогии с заменой цвета. Получаем элемент container, у которого будем менять цвет свойства border-color с розового на черный.
Теперь наш обновленный JavaScript сработал. Рамка у заголовка окрасилась в черный цвет.
Заключение
Зачем вообще нужно изменять элементы на странице с помощью JavaScript? Не проще ли сразу создать HTML страницу с необходимым CSSкодом? Все дело в том, что JavaScript позволяет реагировать на события, производимые пользователем и менять CSS свойства прямо на ходу. Во взаимодействии с пользователем и заключается вся сила языка JavaScript. Например вы можете создавать формы и проверять, что туда вводит пользователь. Просто создавать HTML страницы и стилизовать их согласно макету заказчика, недостаточно в современной веб-разработке. Вы можете возразить, что для этого есть другие специалисты - JavaScript программисты. Однако в реальном мире, заказчики предпочитают выбирать исполнителей с опцией «все включено», чтобы цепочка исполнителей была, как можно короче. Поэтому изучайте JavaScript на моем видеокурсе, если вы хотите стать востребованным фронтенд-разработчиком.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Читайте также: