Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Взять стиль из объекта / 8 сообщений из 8, страница 1 из 1
29.10.2015, 13:52
    #39090038
вопрос от новичка
вопрос от новичка
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Взять стиль из объекта
Есть объект, в котором прописаны некоторые CSS-свойства. Хочется применить их к элементу. Делаю так (самое интересное ошибки нет)
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
<!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>


В консоле выводятся правильные строки
Код: javascript
1.
2.
3.
el.style.background = "orange"
el.style.padding = "10px"
el.style.border = "2px solid green"

но я не знаю, как их применить к стилю элемента. Использовать eval() не хочется.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.10.2015, 14:23
    #39090085
Alexander A. Sak
Alexander A. Sak
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Взять стиль из объекта
el.style[k] Не?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.10.2015, 14:35
    #39090101
вопрос от новичка
вопрос от новичка
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Взять стиль из объекта
Alexander A. Sak,

Код: javascript
1.
el.style[k] = '"' + s[k] + '"';

Ошибка при парсинге значения «background». Потерянное объявление
Ошибка при парсинге значения «padding». Потерянное объявление
Ошибка при парсинге значения «border». Потерянное объявление
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.10.2015, 14:49
    #39090125
Alexander A. Sak
Alexander A. Sak
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Взять стиль из объекта
Кавычки лишние.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.10.2015, 14:53
    #39090133
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Взять стиль из объекта
вопрос от новичкакак их применить к стилю элемента
Как вариант...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#d1 {width:200px; border:1px solid #ccc; margin:20px;}
</style>
<script type='text/javascript'>
var s = {
	id: 'd1', 
	style: {
		background: 'orange', 
		padding: '10px', 
		border: '2px solid green'
	}
};
function run(Obj) {
	var obj = document.getElementById(Obj.id);
	for (var k in Obj.style) {
		obj.style[k] = Obj.style[k];
	};
};
</script>
</head>
<body>
<button onclick="run(s);" id="Button1">Go</button>
<div id="d1">div 1</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.10.2015, 15:27
    #39090196
вопрос от новичка
вопрос от новичка
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Взять стиль из объекта
Alexander A. SakКавычки лишние.точно. Такой вариант работает, спасибо!
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
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') {    
      el.style[k] = s[k];
    }
  }
}


krvsaКак вариант...Так тоже работает. Интересный подход с разделением атрибутов. Пригодится в будущем, спасибо!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.10.2015, 16:46
    #39090316
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Взять стиль из объекта
вопрос от новичкаИнтересный подход с разделением атрибутов.
Чем удобнее данные - тем удобнее их использовать... ;)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.10.2015, 17:26
    #39090359
вопрос от новичка
вопрос от новичка
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Взять стиль из объекта
krvsa,

это точно!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Взять стиль из объекта / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 326ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1445670]:
 0ms
get settings:
 6ms
get forum list:
 10ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 44ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 49ms
get tp. blocked users:
 1ms
others: 198ms
total:  326ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]