Добавляем...


Вычисляемые стили
Одна из тонкостей применения свойства 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>


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика