Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Получение всех стилей у эелемента (https://javascript.ru/forum/jquery/30562-poluchenie-vsekh-stilejj-u-ehelementa.html)

bio 08.08.2012 16:16

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

bes 08.08.2012 16:39

http://learn.javascript.ru/styles-an...tcomputedstyle

bio 08.08.2012 21:20

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>")	
}

Почему то не выводит значения свойства, а лишь названия и порядковые номера.
Так же, если к примеру, указать вывести цвет текста, то он почему-то выводит значение которое было задано в классе без псевдокласса, а значения с псевдокласса не выводит

bes 08.08.2012 22:23

Вывести можно так, с псевдо-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>

melky 08.08.2012 23:11

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>

bes 09.08.2012 10:29

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

PS: https://developer.mozilla.org/en-US/...yleDeclaration

melky 09.08.2012 15:41

Цитата:

Сообщение от bes (Сообщение 195809)
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~!!! А я его в функции анимирования использую.

bes 09.08.2012 15:54

Цитата:

Сообщение от melky
в хроме различий нет, в остальных браузерах были (раньше).

да, понял, хром самый адекватный, в opere и FF undefined лезет

melky 09.08.2012 17:19

Цитата:

Сообщение от bes (Сообщение 195935)
да, понял, хром самый адекватный, в opere и FF undefined лезет

у него повешен getter\setter на свойство cssText -> чтение\запись в это самое свойство у него самое медленное. другие браузеры пока здоровы.

Я заметил это, когда писал функцию css для анимации (на форуме тут самая первая версия лежит).

bes 09.08.2012 17:25

Цитата:

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

за удобство приходится платить, но удобство обычно побеждает


Часовой пояс GMT +3, время: 07:40.