Взять стиль из объекта

user89 · October 29, 2015

Есть объект, в котором прописаны некоторые CSS-свойства. Хочется применить их к элементу. Делаю так (самое интересное ошибки нет)

<!DOCTYPE html><html><head><meta charset="utf-8"><style>#d1 {width:200px; border:1px solid #ccc; margin:20px;}</style></head><body><button onclick="run(s)" id="Button1">Button1</button><div id="d1">div 1</div><script>var s = {id:'d1', background:'orange', padding:'10px', border:'2px solid green'};function run(s) {  var el = document.getElementById(s.id), k;  for (k in s) {    if (k != 'id') {          console.log('el.style.' + k + ' = ' + '"' + s[k] + '"');      el.style.k = '"' + s[k] + '"';    }  }}</script></body></html>

В консоле выводятся правильные строки

el.style.background = "orange"

el.style.padding = "10px"

el.style.border = "2px solid green"

но я не знаю, как их применить к стилю элемента. Использовать eval() не хочется.

el.style[k] также не помог... Пример на фиддлере https://jsfiddle.net/6ohy1qdy/

user89 · October 29, 2015

Решение



<!DOCTYPE html>

<html>

<head>

<title>Взять стиль из объекта</title>

<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>

<style>

#d1 {width:200px; border:1px solid #ccc; margin:20px;}

</style>

</head>


<body>

<button onclick="run(s);">Взять стиль из объекта</button>

<div id="d1">div 1</div>


<script type='text/javascript'>

var s = {

  id: 'd1',

  style: {

    background: 'orange',

    padding: '15px',

    border: '2px solid green'

  }

};

function run(s) {

  var el = document.getElementById(s.id);

  for (var k in s.style) {

    el.style[k] = s.style[k];

  };

};

</script>

</body>

</html>

Edited October 29, 2015 by user89

Great Rash · October 29, 2015

Не проще ли просто клонировать ноду?

user89 · October 29, 2015

Да хотелось узнать, можно ли проcтым путём через JSON ещё и стиль передать

Great Rash · October 29, 2015

При клонировании ноды все стили на ней сохраняются.

nerv · November 1, 2015

Каскадные таблицы стилей для этого существуют

Sign In

Взять стиль из объекта

Question

user89

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

user89

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

user89

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

nerv

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information