Форум

twiligth · #1 (**permalink**) 02.11.2011, 02:26

Вопрос наверно элементарный, но уже мозг сломал об него...(

Если в ХТМЛ стили задать непосредственно т.е. внутри тэга через style="..."

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function MyFunc()
{
alert(document.getElementById('test1').style.color);
alert(document.getElementById('test1').style.backgroundColor);
}
</script>
</head>
<body onload="MyFunc()">
<div id="test1" style="color:#123456; background-color:#000000;">test</div>
</body></html>

то в javascript вызовы

Код:

alert(document.getElementById('test1').style.color);
alert(document.getElementById('test1').style.backgroundColor);

выводят как надо, #123456 и #000000.

но если стили задать через тэг STYLE

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<style type="text/css">
.qwerty {color:#123456; background-color:#000000;}
</style>
<script type="text/javascript">
function MyFunc()
{
alert(document.getElementById('test1').style.color);
alert(document.getElementById('test1').style.backgroundColor);
}
</script>
</head>
<body onload="MyFunc()">
<div id="test1" class="qwerty">test</div>
</body></html>

то обращения к style.color и т.п. дают почему-то пустые строки. ((

B@rmaley.e><e · #2 (**permalink**) 02.11.2011, 03:02

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

о обращения к style.color и т.п. дают почему-то пустые строки.

Может быть потому, что в атрибуте style ничего не указано?
window.getComputedStyle

twiligth · #3 (**permalink**) 02.11.2011, 09:17

Спасибо, getComputedStyle работает =)

Теперь еще интересный момент, уже чисто для интереса. Если задать составной стиль

<style type="text/css">
.qwerty{ border: 3px #8080ff solid;}
</style>

и вывести все его свойства через for (var key in computedStyle)
получаем следущее (для border)

border =
borderCollapse = separate
borderColor =
borderSpacing = 0px 0px
borderStyle =
borderTop =
borderRight =
borderBottom =
borderLeft =
borderTopColor = rgb(128, 128, 255)
borderRightColor = rgb(128, 128, 255)
borderBottomColor = rgb(128, 128, 255)
borderLeftColor = rgb(128, 128, 255)
borderTopStyle = solid
borderRightStyle = solid
borderBottomStyle = solid
borderLeftStyle = solid
borderTopWidth = 3px
borderRightWidth = 3px
borderBottomWidth = 3px
borderLeftWidth = 3px
borderWidth =

то есть значения "раскидываются" по "элементарным" стилям типа borderLeftWidth, а составные стили - пустые. В принципе про эту фишку упомянуто в описании getComputedStyle

...Стоит отметить, что с помощью currentStyle нельзя получить значения для "составных" CSS свойств, которые перечисляют свойства через пробел...

но тогда не понятен смысл, зачем в списке стилей выдаются все эти borderWidth и borderColor, если они всегда пустые будут...

ksa · #4 (**permalink**) 02.11.2011, 09:22

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

зачем в списке стилей выдаются все эти borderWidth и borderColor

Потому что они там есть.

Ты же сам дал команду

for (var key in computedStyle)

Вот тебе и вывели все (!) ключи объекта и их значения...

twiligth · #5 (**permalink**) 02.11.2011, 09:28

Да это понятно что они там есть, и for-in выводит все потроха объекта )) вопрос нафига они там есть, если все равно всегда пустые будут, как я понял...

ksa · #6 (**permalink**) 02.11.2011, 10:25

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

вопрос нафига они там есть

Для того, чтобы можно было им что-то присвоить...

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

все равно всегда пустые будут

От того, что они не нужны тебе не значит, что они никому не нужны...

Ведь ты много чем не пользуешся в жизни... Но оно таки есть!

twiligth · #7 (**permalink**) 02.11.2011, 10:48

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

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

вопрос нафига они там есть

Для того, чтобы можно было им что-то присвоить...

Точняг)) щас поэксперементировал еще - вроде все окончательно ясно стало)

var z = document.createElement('DIV');
z.style.border='3px #8080ff solid';

на запись вполне себе работает, стили меняются, вид странички тоже, и computedStyle тоже =)

Спасибо всем =)

Форум

Справочник

Discord чат

Курсы javascript