Применить CSS динамически с помощью JavaScript

Question

Что такое хороший способ динамического применения стилей (т. Е. Значения стилей во время выполнения) к элементам HTML с JavaScript?

Я ищу способ упаковки виджета JavaScript (JS, CSS и разметки) в одном компоненте (в основном, в объекте). Идея заключалась бы в том, чтобы компонент инкапсулировал стилизацию (так что у пользователей есть хороший API, чтобы изменить его, а не более тесно связанный подход для изменения CSS напрямую и с косвенными изменениями). Проблема в том, что один вызов API может означать изменения нескольких элементов стиля.

Как я могу это сделать, это построить CSS и установить атрибут style в соответствующие элементы (скорее всего, используя идентификатор, чтобы избежать внесения изменений в другие области разметки). Это хорошее решение? Есть ли лучший способ сделать это?

Answer 1

Как я могу это сделать, это построить CSS и установить атрибут стиля в соответствующие элементы. Например:

var div = document.createElement('div'); 
div.setAttribute("style", "color: blue, margin-top:5px"); 
document.body.appendChild(div); 

Этот код будет создан новый элемент DIV со стилем color: blue, margin-top:5px и добавить его на страницу.

Answer 2

Использование Jquery

Используйте функцию CSS(), чтобы применить стиль к существующим элементам, где вы передаете объект, содержащий стили:

var styles = { 
    backgroundColor : "#ddd", 
    fontWeight: "" 
}; 
$("#myId").css(styles); 

Можно также применить один стиль в то время с:

$("#myId").css("border-color", "#FFFFFF"); 

Vanil л JS:

var myDiv = document.getElementById("#myId"); 
myDiv.setAttribute("style", "border-color:#FFFFFF;"); 

С Css:

Вы также можете использовать отдельный файл CSS, содержащий различные стили, необходимые внутри классов, и в зависимости от контекста, вы добавляете или удалить эти классы для ваших элементов ,

в файле CSS вы можете иметь классы, как

.myClass { 
    background-color: red; 
} 

.myOtherClass { 
    background-color: blue; 
} 

Опять же с помощью JQuery, чтобы добавить или удалить класс к элементу, вы можете использовать

$("#myDiv").addClass('myClass'); 

или

$("#myDiv").removeClass('myClass'); 

Я думаю, что это более чистый способ, поскольку он отделяет ваш стиль от вашей логики. Но если значения вашего css зависят от того, что возвращается сервером, это решение может быть сложно применить.

Answer 3

Я мог бы неправильно истолковать ваш вопрос, но похоже, что вы просите простую архитектурную схему. Вам нужно что-то, что облегчает тем, кто использует ваш виджет, чтобы изменить его на свои характеристики?

Если это так, то я не знаю какого-либо специального шаблона для этого, не используя CSS.

Я могу сказать вам, что «виджеты», которые я нашел наиболее удобными в использовании, имеют отдельные файлы CSS. Я нашел довольно простым изменить их в соответствии с моими потребностями. Я думаю, это связано с тем, что структура использования CSS с HTML и Javascript уже является хорошим и простым шаблоном. Я не знаю, что есть что-то лучше, особенно учитывая, что люди уже очень хорошо знакомы с отношениями HTML/CSS.