Как с помощью js прописать стили в css?
Есть способ применить стили inline через внутренний объект style у DOM элементов. Возможно иным способом применить стили по мимо замены класса, что бы эти свойства можно прописать в css или что — то в этом роде.
Отслеживать
задан 2 дек 2017 в 0:52
Виталик Черный Виталик Черный
1,476 1 1 золотой знак 11 11 серебряных знаков 35 35 бронзовых знаков
Не очень понятно, что требуется. В Вашем вопросе 2 способа уже есть: замена класса и замена стилей через style. Наверное, Вы имеете в виду, что нужно что-то типа этого: element.setAttribute(‘class’, ‘имя_класса_для_css’);
2 дек 2017 в 1:08
$(«#id_element»).css(<"color":"red">);
2 дек 2017 в 1:08
@МаксимСтепанов, вы понимаете за что отвечает объект style у DOM элементов и вообще знаете что такое css? возможно ли поменять свойства в css не inline, а через css или может есть иной способ.
2 дек 2017 в 2:41
@Даниил, цитирую себя: Есть способ применить стили inline. . ваш пример делает это inline . Аналогично можно сделать через: document.getElementById(‘id_element’).style.color = «red»;
2 дек 2017 в 2:44
npm install aphrodite
2 дек 2017 в 8:08
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
var styleNode; function addStyle() < styleNode = document.createElement("style"); styleNode.innerText = ".test"; document.body.appendChild(styleNode); > function removeStyle()
Отслеживать
ответ дан 2 дек 2017 в 4:33
user176262 user176262
подскажите где я могу прочитать про метод append ? Я просто плохо знаю какую роль играет функцию Element. Пробовал создать объект на ее основе, но не работает как конструктор, хотя находиться в цепочки прототипом как объект.
3 дек 2017 в 21:20
я так понял что этот метод создает в html тег style и туда пишет стили. Возможно ли отредактировать сам style.css который был загружен?
3 дек 2017 в 21:24
@ВиталикЧерный Я не понимаю, чего Вы хотите достичь. Попробуйте сформулировать. Отредактировать внешний css файл нельзя. w3schools.com/jsref/met_node_appendchild.asp
Как изменить свойство класса CSS через JS?
Вы не можете изменить уже описанный класс, так как он фиксирован в CSSOM. Именно класс, так как он может быть применён ко многим элементам.
Но вы можете описать дополнительные классы, в которых значения нужных вам свойств будут иметь нужные вам значения и добавлять их к нужным элементам в нужный момент, например, при нажатии. addEventListener, classList
Но при этом вам нужно следить за весом селектора, чтобы нужное вам правило применилось в правильном порядке и перезаписало нужные вам свойства. Selector, selector specificity.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Артем Спиридонов @customtema
Легко. Сколько угодно.
document.write('');Как изменить стиль класса CSS через Javascript?
Согласно книге, которую я читаю, лучше изменить css, по классу, когда вы используете Javascript для изменения css. Но как? Может ли кто-нибудь дать образец фрагмента для этого?
sasori 08 фев. 2010, в 12:28
Поделиться
Поделиться:
8 ответов
Лучший ответ
Предположим, что у вас есть:
text и следующие стили:
.oldclass < color: blue >.newclass
Вы можете изменить класс на mydiv в javascript следующим образом:
document.getElementById('mydiv').className = 'newclass'; После манипуляции с DOM вы останетесь с:
text Если вы хотите добавить новый класс css без удаления старого, вы можете добавить к нему:
document.getElementById('mydiv').className += ' newClass'; Это приведет к:
text Asaph 08 фев. 2010, в 13:03
Поделиться
Вместо document.getElementById(‘mydiv’).className += ‘ newClass’; используйте classList для добавления и удаления классов: document.getElementById(‘mydiv’).classList.add(‘newclass’); , Делая это таким образом, вам не нужно будет проверять, существует ли класс, прежде чем добавлять его, метод add сделает это за вас. Аналогично, при удалении вам не придется проверять, существует ли класс, прежде чем манипулировать свойством className . Вам также не нужно помнить префикс добавляемого вами класса с пробелом.
nwayve 04 июль 2014, в 00:54
@nwayve: classList поддерживается только в IE> = 10, Chrome> = 34, Firfox> = 29 и Safari> = 7. Источник: caniuse.com/#search=classList . Если вам нужна поддержка старых браузеров, используйте className .
Asaph 05 июль 2014, в 07:25
@Asaph: На самом деле это поддерживается в Chrome> = 8.0, Firefox> = 3.6, Safari> = 5.1, Opera> = 11.5 и IE> = 10.0. Источник (нажмите Показать все версии). Единственный старый браузер, о котором вам следует беспокоиться о поддержке, — это IE
nwayve 05 июль 2014, в 16:04
@nwayve: Источник, на который вы ссылались, тот же, что и я. Но я не знал, что мне нужно нажать «Показать все версии», чтобы увидеть минимально поддерживаемую версию (не самый интуитивно понятный интерфейс, если вы спросите меня). Спасибо за разъяснения. В любом случае, точка остается в className , className более обратно совместимо, чем classList .
Asaph 06 июль 2014, в 05:21
Ба ответил, но только один.
yan bellavance 16 янв. 2018, в 02:39
Показать ещё 3 комментария
Так как classList поддерживается во всех основных браузерах и jQuery снижает поддержку IE < 9(в ветке 2.x как точки Stormblack в комментарии), учитывая этот HTML
text вы можете с комфортом использовать этот синтаксис:
document.getElementById('mydiv').classList.add("newClass"); Это также приведет к:
text плюс вы также можете использовать remove, toggle, содержит методы.
Jan Turoň 29 апр. 2013, в 18:12
Поделиться
уточнить — jQuery не отказался от поддержки IE
SteveB 03 янв. 2014, в 11:00
Я думаю, что это лучшее чистое решение JS, использующее add и remove . Гораздо лучше, чем принятый ответ.
mbomb007 25 нояб. 2015, в 21:34
Я очень рекомендую jQuery. Затем он становится таким простым, как:
$('#mydiv').addClass('newclass'); Вам не нужно беспокоиться об удалении старого класса, тогда как addClass() будет только добавляться к нему. У вас также есть removeClass();
Другим преимуществом над методом getElementById() является то, что вы можете применить его к нескольким элементам одновременно с одной строкой кода.
$('div').addClass('newclass'); $('.oldclass').addClass('newclass'); Первый пример добавит класс ко всем элементам DIV на странице. Второй пример добавит новый класс ко всем элементам, которые в настоящее время имеют старый класс.
Andy Shellam 08 фев. 2010, в 12:24
Поделиться
ну, jQuery / mootools / $ randomframework всегда есть вариант…
knittl 08 фев. 2010, в 11:56
спасибо за советы, сэр. Я скоро займусь этим. Я только начинаю читать о javascript;)
sasori 08 фев. 2010, в 12:03
Другое преимущество в использовании инфраструктуры состоит в том, что вы можете более легко добавлять или удалять имена классов, а не просто заменять значение атрибута всего класса (например, удалить «myclass» из элемента с атрибутом класса «myclass myotherclass», который у вас был бы в противном случае). заменить значение атрибута на «myotherclass» или сделать что-то наподобие, например разделить строку на массив и удалить из нее запись «myclass», прежде чем соединять ее вместе, и т. д. Go Frameworks!
Alan Plum 08 фев. 2010, в 12:18
Я никогда не принимал идею использования библиотеки Javascript, так как думал, что это будет просто еще одна инфраструктура для использования, другой файл JS для загрузки, другое место для отладки для поиска проблем . yada yada yada. Однажды мне было скучно, укусил пулю и попробовал jQuery. В течение часа я поклялся никогда не создавать сайт или веб-приложение без него — это так просто! Вы могли бы даже изучить jQuery и никогда не трогать любой другой Javascript.
Andy Shellam 08 фев. 2010, в 15:32
Хорошо знать, как делать вещи без фреймворка, для понимания и когда вы хотите сделать что-то по-настоящему легкое, но нет никаких причин не использовать библиотеку, такую как jQuery, для большинства разработок.
Mark Snidovich 08 фев. 2010, в 20:41
Полностью согласен, Марк. Теперь я думаю об этом, как о менеджере — никогда не передавай работу подчиненному, которого ты не сможешь сделать сам. Т.е. никогда не используйте фреймворк, чтобы делать что-то, чего вы не знаете, как делать сами.
Получение и установка CSS-свойств элементам в jQuery
В jQuery работа со стилями HTML элементов осуществляется через метод css . Данный метод используется как получения значения стилей, так и для их добавления, изменения и удаления.
Как получить стиль элемента в jQuery
Первый вариант метода css — это получение окончательного значения CSS-свойства непосредственно применяемого к элементу.
Синтаксис метода css :
JavaScript
// Вариант 1 (получение окончательного одного CSS свойства) .css( propertyName ) // propertyName (тип: Строка) – имя CSS-свойства, значение которого нужно получить .css( propertyNames ) // propertyName (тип: Массив) – массив, состоящий из одного или нескольких CSS-свойств, значения которых нужно получитьДанный метод, если его применить к набору элементов, возвращает значение CSS свойства только для первого его элемента.
Пример, в котором получим цвет фона непосредственно применённого к элементу #header :
JavaScript
var bgHeader = $('#header').css('background-color');В jQuery названия CSS-свойств можно указывать как в CSS, так и как это принято в JavaScript. Т.е. убирать дефисы и заменять буквы, следующие за каждым дефисом на прописные.
JavaScript
// можно и так var bgHeader = $('#header').css('backgroundColor');Если необходимо получить значения указанного CSS свойства или набора этих свойств у всех элементов текущего набора, то в этом случае необходимо использовать, например, метод each.
Например, определим значение свойства display у всех выбранных элементов и выведем их в консоль:
JavaScript
// переберём все элементы .container $('.container').each(function(index){ // значение css-свойства display текущего элемента набора var display = $(this).css('display'); // выведем результат в консоль (индекс элемента в наборе и его значение css-свойства display) console.log(index + '. display = '+ display); });Кроме этого, метод css позволяет также получить сразу несколько CSS свойств у элемента.
Например, при нажатии на HTML элемент div выведим его ширину и высоту:
.
Как изменить или добавить стиль к элементу в jQuery
Установить стиль элементу осуществляется тоже с помощью метода css, но в этом случае используется следующий синтаксис:
JavaScript
// 1 вариант (для установки одного стиля элементу) .css( propertyName, value ) // 2 вариант (установка значения стиля с помощью функции) css( propertyName, function ) // 3 вариант (для установки несколько стилей элементу) css( properties ) // Описание параметров: // propertyName (тип: String) – имя CSS-свойства // value (тип: String или Number) – значение, которое нужно установить CSS-свойству // function – функция, результат выполнения которой будет установлен в качестве значения CSS-свойству // Синтаксис функции: // Function( Integer index, String value ) => String или Number // В качестве аргументов функция получает индекс элемента (index) и текущее окончательное значение CSS-свойства (value) // properties (тип: объект JavaScript, содержащий ноль или более пар ключ-значение) – объект, состоящий из пар DOM-свойство-значение, которые нужно установить элементу.При установлении стилей с помощью метода css , они задаются ко всем элементам текущего набора.
Например, добавим ко всем элементам .info серый цвет фона (background):
. . Если необходимо применить к каждому элементу текущего набора сразу несколько CSS свойств, то в качестве параметра этого метода необходимо использовать объект JavaScript, содержащий пары ‘имяСвойства’ : значение.
JavaScript
.css({'имяСвойства1':значение, 'имяСвойства2':значение. })Пример, в котором показано как можно задать несколько CSS-свойств к элементам .success :
JavaScript
$('.success').css({ 'color':'green', 'font-size':'16px' });В качестве значения строки также можно использовать относительные значения, которые начинаются с += или -= . Первое выражение используется для увеличения текущего значения CSS свойства, а второе — для уменьшения.
Например, увеличим отступ слева и справа у элементов .container на 10px :
JavaScript
$('.container').css({ "padding-left": "+=10", "padding-right":"+=10" });Ещё один способ использования метода css — это применение в качестве 2 параметра функции.
JavaScript
.css('имяСвойства',функция) // функция: Function( Integer index, String value ) => String или NumberВариант использования метода css, у которого в качестве второго параметра используется функция обычно находить применение, когда значение необходимо как-то вычислить или определить по какому-то алгоритму.
Например, установим всем элементам .text , у которых цвет шрифта не равен чёрному, CSS свойство color , равное red .
JavaScript
$('.text').css('color',function(index,value){ if (value!=='rgb(0, 0, 0)') { return 'red'; } });Например, поменяем значение CSS свойства width у всех элементов img на странице, находящихся #content :
JavaScript
$('#content img').css('width','300px');Как удалить определённый стиль у элемента
Для того чтобы в jQuery убрать определённый стиль у элемента, ему необходимо присвоить просто пустую строку.
Например, уберём у всех изображений на странице CSS свойство height :
JavaScript
$('img').css('height','');