Мне нужно динамически создать класс таблицы стилей CSS в JavaScript и назначить его некоторым элементам HTML, таким как - div, table, span, tr и т. Д., А также некоторым элементам управления, таким как asp: Textbox, Dropdownlist и datalist.
Является ли это возможным?
Было бы неплохо с образцом.
javascript
css
stylesheet
Himadri
источник
источник
Ответы:
Хотя я не уверен, почему вы хотите создавать CSS-классы с помощью JavaScript, вот вариант:
источник
Нашел лучшее решение, которое работает во всех браузерах.
Использует document.styleSheet для добавления или замены правил. Принятый ответ короток и удобен, но это работает через IE8 и менее.
Функция используется следующим образом.
источник
var styleSheetLength = styleSheet.cssRules ? styleSheet.cssRules.length : 0
и заменить ее использование на реализацию функции.Короткий ответ, это совместимо "во всех браузерах" (в частности, IE8 / 7):
И этот последний бит применяет класс к элементу:
Вот небольшая тестовая страница: https://gist.github.com/shadybones/9816763
Ключевым моментом является тот факт, что элементы стиля имеют свойство «styleSheet» / «sheet», которое можно использовать для добавления / удаления правил.
источник
Есть легкий плагин jQuery, который позволяет генерировать объявления CSS: jQuery-injectCSS
На самом деле, он использует JSS (CSS описан JSON), но его довольно легко обрабатывать, чтобы генерировать динамические таблицы стилей CSS.
источник
У YUI на данный момент лучшая утилита стилей, которую я когда-либо видел. Я призываю вас проверить это, но вот вкус:
Очевидно, есть другие, гораздо более простые способы изменения стилей на лету, такие как предложенные здесь. Если они имеют смысл для вашей проблемы, они могут быть лучшими, но есть определенные причины, по которым изменение css является лучшим решением. Наиболее очевидный случай - когда вам нужно изменить большое количество элементов. Другой важный случай - если вам нужны изменения стиля, чтобы задействовать каскад. Использование dom для изменения элемента всегда будет иметь более высокий приоритет. Его подход кувалдой и эквивалентен использованию атрибута стиля непосредственно в элементе html. Это не всегда желаемый эффект.
источник
Начиная с IE 9. Теперь вы можете загрузить текстовый файл и установить свойство style.innerHTML. По сути, теперь вы можете загрузить файл CSS через ajax (и получить обратный вызов), а затем просто установить текст внутри тега стиля следующим образом.
Это работает в других браузерах, не уверен, как далеко назад. Но пока вам не нужно поддерживать IE8, тогда это будет работать.
и тогда вы можете получить его внешний файл, например, myCss.css
источник
Вот решение Вишваната, слегка переписанное с комментариями:
источник
Интересным проектом, который может помочь вам в вашей задаче, является JSS .
Библиотека JSS позволяет вводить в раздел DOM / head, используя
.attach()
функцию.Repl онлайн-версия для оценки.
Дополнительная информация о JSS .
Пример:
источник
Использование Google Closure:
Вы можете просто использовать модуль ccsom:
Код javascript пытается быть кроссбраузерным при размещении узла css в заголовке документа.
источник
https://jsfiddle.net/xk6Ut/256/
Один из вариантов динамического создания и обновления CSS-класса в JavaScript:
класс CSS
.....
...
источник
Просматривал ответы, и самое очевидное и прямое отсутствует: используйте,
document.write()
чтобы написать кусок CSS, который вам нужен.Вот пример (посмотрите на codepen: http://codepen.io/ssh33/pen/zGjWga ):
источник
источник
Вот мое модульное решение:
Вы в основном где-нибудь в своем коде делаете:,
addNewStyle('body', 'color: ' + color1);
гдеcolor1
определена переменная.Если вы хотите «опубликовать» текущий CSS-файл, вы просто делаете это
submitNewStyle()
,и тогда вы все равно можете добавить еще CSS.
Если вы хотите добавить его с помощью «медиа-запросов», у вас есть возможность.
После «добавления новых стилей» вы просто используете
submitNewStyleWithMedia('min-width: 1280px');
.Это было довольно полезно для моего варианта использования, так как я менял CSS публичного (не моего) сайта в соответствии с текущим временем. Я отправляю один CSS-файл перед использованием «активных» сценариев, а остальные - после него (чтобы сайт выглядел примерно так, как должен до доступа к элементам через
querySelector
).источник
В интересах искателей; если вы используете jQuery, вы можете сделать следующее:
Очевидно, вы можете изменить внутренний CSS на то, что вы хотите.
Признаться, некоторые люди предпочитают чистый JavaScript, но он работает и был достаточно надежным для динамического написания / перезаписи стилей.
источник
Я просматривал некоторые ответы здесь, и я не смог найти ничего, что автоматически добавляет новую таблицу стилей, если ее нет, а если нет, то просто изменяет существующую таблицу, которая уже содержит необходимый стиль, поэтому я сделал новую функцию ( должен работать во всех браузерах, хотя и не тестировался, использует addRule и, кроме того, только базовый нативный JavaScript, дайте мне знать, если он работает):
затем просто добавьте эти 2 вспомогательные функции либо внутри вышеуказанной функции, либо в любом другом месте:
(обратите внимание, что в обоих из них я использую цикл for вместо .filter, поскольку у классов стилей / списка правил CSS есть только свойство length, а метода .filter нет.)
Затем назвать это:
Дайте мне знать, если он работает для вашего браузера или выдает ошибку.
источник