Форум

bio · #1 (**permalink**) 08.08.2012, 16:16

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

bes · #2 (**permalink**) 08.08.2012, 16:39

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

bio · #3 (**permalink**) 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 · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 09.08.2012, 10:29

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

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

melky · #7 (**permalink**) 09.08.2012, 15:41

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

bes · #8 (**permalink**) 09.08.2012, 15:54

Сообщение от melky

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

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

melky · #9 (**permalink**) 09.08.2012, 17:19

Сообщение от bes

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

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

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

bes · #10 (**permalink**) 09.08.2012, 17:25

Сообщение от melky

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

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

Форум

Справочник

Discord чат

Курсы javascript