Одна из тонкостей применения свойства
style объектов документа заключается в том, что оно представляет только внутристрочные стили элемента. Именно внутристрочные стили указываются с помощью атрибута
style (X)HTML. Поэтому нет такой гарантии, что значения, полученные таким образом, представляют стили, отображаемые браузером.
Например,
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Какой у меня cтиль?</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
style type="text/css">
p { text-decoration: underline !important}
</style>
</head>
<body>
<p id="раrа">Этот текст всегда отображается подчеркнутым, даже если попытаться изменить его представление, установив другой внутристрочный стиль</р>
<script type="text/javascript">
document.getElementById("para").style.textDecoration = "none"
alert(document.getElementById("para").style.textDecoration);
</script>
</body>
</html>
Текст остается подчерком даже после того, как для свойства стиля было установлено значение
"none". Причина в том, что здесь на уровне с документа имеется правило CSS с параметром
!important, которое не дает изменить представление текста с помощью внутристрочного стиля.
При этом окно предупреждения сообщает, что значением
textDecoration все же является
"none", а это, очевидно, выглядит несколько обескураживающим.
Выяснение
действительного стиля, применяемого к объекту, может оказаться непростым делом. В браузерах с поддержкой DOM2 можно использовать метод
getComputedStyle () представления документа, которое используется по умолчанию.
Используемое по умолчанию представление документа — это представление по умолчанию в данном Web-браузере, т. е. представление, для которого используются все правила стиля. Метод
getComputedStyle () имеет два аргумента: узел, к которому должен применяться стиль, и соответствующий псевдоэлемент (например, ":hover" или пустая строка, если требуется нормальное представление).
Выяснить стиль абзаца в предыдущем примере можно с помощью
var p = document.getElementById("para");
var finalStyle = document.defaultView.getComputedStyle(p, "");
Для выяснения отдельных свойств используйте метод
getPropertyValue (), которому необходимо передать строку, указывающую нужное свойство:
alert("Истинным стилем текста абзаца является " + finalStyle.getPropertyValue("text-decoration")) ;
К сожалению, по мере погружения в глубины поддержки DOM2 браузерами, начинают сказываться различия такой поддержки различными производителями. Дело обстоит даже хуже, чем можно было бы ожидать: в ІЕ6 и более ранних верен браузера вы не обнаружите поддержку этого подхода, а вместо этого для вычисления текущих значений свойств объекта вам придется использовать
currentStyle.
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> ;
html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Какой у меня стиль? Попытка 2.</title>
<meta http-equiv="content-type"
style type="text/css">
p { text-decoration: underline !important }
</style>
</head>
<body>
<p id="раrа">Этот текст всегда отображается подчеркнутым, даже если попытаться изменить его представление, уиановив другой внутристрочный стиль</р>
style type="text/javascript">
document.getElementById("para").style.textDecoration = "none";
alert ("Стиль, определенный для абзаца: " + document.getElementById("para").style.textDecoration);
var p = document.getElementById("para");
if (p.currentStyle)
alert("Стиль, используемый для абзаца на самом деле: " + р.currentStyle.textDecoration);
else
{
var finalStyle = document.defaultView.getComputedStyle(p, "");
alert("Стиль, используемый для абзаца на самом деле: " + finalStyle.getPropertyValue("text-decoration"));
}
</script>
</body>
</html>