Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.08.2012, 16:16
bio bio вне форума
Новичок на форуме
Отправить личное сообщение для bio Посмотреть профиль Найти все сообщения от bio
 
Регистрация: 08.08.2012
Сообщений: 7

Получение всех стилей у эелемента
Подскажите пож-та как можно узнать все стили любого элемента ? Какие стили буду запрашивать заранее не известно, поэтому нужно получить все стили элемента и потом уже отсеивать не нужные.
Ответить с цитированием
  #2 (permalink)  
Старый 08.08.2012, 16:39
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

http://learn.javascript.ru/styles-an...tcomputedstyle
Ответить с цитированием
  #3 (permalink)  
Старый 08.08.2012, 21:20
bio bio вне форума
Новичок на форуме
Отправить личное сообщение для bio Посмотреть профиль Найти все сообщения от bio
 
Регистрация: 08.08.2012
Сообщений: 7

bes, спасибо!
А не подскажите как можно вывести всё что получил с помощью getComputedStyle в виде объекта:
{ 
"color" : "#fff", 
"font-size" : "15px"
}

Что бы стили брал так же :hover элемента.
Пробовал сделать такое:
var el = document.getElementById('asd');
var cs= document.defaultView.getComputedStyle(element,'hover');

for(var i in cs){
	document.write(i + " : " + cs[i] + "<br>")	
}

Почему то не выводит значения свойства, а лишь названия и порядковые номера.
Так же, если к примеру, указать вывести цвет текста, то он почему-то выводит значение которое было задано в классе без псевдокласса, а значения с псевдокласса не выводит
Ответить с цитированием
  #4 (permalink)  
Старый 08.08.2012, 22:23
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Вывести можно так, с псевдо-cелекторами надо разбираться
<style>
div {
	background-color: lightgreen;
}
</style>
<div></div>
<script>
window.onload = function () {
	var div = document.body.children[0];
	var cs = getComputedStyle(div);
	var len = cs.length;
	for (var i = 0; i < len; i++) {
		div.innerHTML += cs[i] + ': ' + cs[cs[i]] + ';<br><hr><br>';
	}
}
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 08.08.2012, 23:11
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

bio,


<style>div:hover { color:red; }</style>
<div id="a">LOL</div>
<script>
var el = document.getElementById('a');
var style = window.getComputedStyle(el, 'hover');
var property;

for (var i = 0, b = style.length; i < b; i += 1) {
    property = style[i];
    document.write(property + " : " +  style.getPropertyValue(property) + ";<br>");
}
</script>

Последний раз редактировалось melky, 08.08.2012 в 23:13.
Ответить с цитированием
  #6 (permalink)  
Старый 09.08.2012, 10:29
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

melky, эквиваленты ли эти два способа? Вроде да.

PS: https://developer.mozilla.org/en-US/...yleDeclaration
Ответить с цитированием
  #7 (permalink)  
Старый 09.08.2012, 15:41
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от bes Посмотреть сообщение
melky, эквиваленты ли эти два способа? Вроде да.

PS: https://developer.mozilla.org/en-US/...yleDeclaration
таки да, но через метод можно вытаскивать свойства, которые с дефисами.

<html>
<head><title></title></head>
<body style="background-color: red;">...
<script>
alert( 
    document.body.style["background-color"] +
     "\n" +
     document.body.style.getPropertyValue("background-color")
 );
</script>
</body>
</html>

в хроме различий нет, в FF и О есть (первое - undefined, Ваш К.О.)

Цитата:
getPropertyCSSValue(propertyName)
Note: This method may be deprecated by the W3C. It is not supported by IE and even though the function exists in Opera, calling it throws a DOMException NOT_SUPPORTED_ERR.
OH SHI~!!! А я его в функции анимирования использую.

Последний раз редактировалось melky, 09.08.2012 в 15:47.
Ответить с цитированием
  #8 (permalink)  
Старый 09.08.2012, 15:54
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от melky
в хроме различий нет, в остальных браузерах были (раньше).
да, понял, хром самый адекватный, в opere и FF undefined лезет
Ответить с цитированием
  #9 (permalink)  
Старый 09.08.2012, 17:19
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от bes Посмотреть сообщение
да, понял, хром самый адекватный, в opere и FF undefined лезет
у него повешен getter\setter на свойство cssText -> чтение\запись в это самое свойство у него самое медленное. другие браузеры пока здоровы.

Я заметил это, когда писал функцию css для анимации (на форуме тут самая первая версия лежит).
Ответить с цитированием
  #10 (permalink)  
Старый 09.08.2012, 17:25
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от melky
у него повешен getter\setter на свойство cssText -> чтение\запись в это самое свойство у него самое медленное. другие браузеры пока здоровы.
за удобство приходится платить, но удобство обычно побеждает
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кроссбраузерное получение стилей Maxman Events/DOM/Window 6 20.06.2010 11:58
Получение зн-я из одного открытого окна в другое без перезагрузки последнего Tihondrius Events/DOM/Window 1 14.03.2010 21:38
Изменение путей к таблицам стилей и скриптам в скрипете галереи lightbox 2.04 Flashton Элементы интерфейса 1 01.02.2010 10:10
Получение текстового содержимого из всех вложенных DOM EmDmAl Events/DOM/Window 8 02.12.2009 23:38
Полный список всех цветов html? Бобр Оффтопик 4 13.04.2009 14:11