Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.11.2010, 22:44
Новичок на форуме
Отправить личное сообщение для nickolasha Посмотреть профиль Найти все сообщения от nickolasha
 
Регистрация: 14.11.2010
Сообщений: 5

Не могу прочитать свойство left, объявленное в <style>
Здравствуйте.
Подскажите, почему я не могу получить доступ в свойству left, если оно обявлено внутри тэга style в заголовке страницы или во внешнем css файле, а если объявляю внутри тэга в аттрибуте style, то доступно это свойство
<html>
<head>
<title>Test</title>
<STYLE TYPE="text/css">
H1{position:relative; left:-1000px}
</STYLE>
<script>
function slideIn(){
var el = document.all.tip;
alert(el.style.left);
if(-1000 == el.style.pixelLeft){
el.style.fontStyle = "italic";
el.style.pixelLeft = document.body.offsetWidth;
}
if(20 <= el.style.pixelLeft){
el.style.pixelLeft -=20;
setTimeout("slideIn()",50);
}
else{
el.style.pixelLeft = 0;
el.style.fontStyle = "";
}
}
</script>
</head>
<body onload="slideIn()">
<H1 ID="tip"> Tip of the week</H1>
<P>Animating text from off screen

</body>
</html>


В этом файле позиционирование и смещение применяется, но при выводе alert, оно выводится пустым и поэтому не работает скрипт.
А если объявляю так, то alert выводит сообщение со значением left и скрипт работает:

<html>
<head>
<title>Test</title>
<STYLE TYPE="text/css">
H1{position:relative}
</STYLE>
<script>
function slideIn(){
var el = document.all.tip;
alert(el.style.left);
if(-1000 == el.style.pixelLeft){
el.style.fontStyle = "italic";
el.style.pixelLeft = document.body.offsetWidth;
}
if(20 <= el.style.pixelLeft){
el.style.pixelLeft -=20;
setTimeout("slideIn()",50);
}
else{
el.style.pixelLeft = 0;
el.style.fontStyle = "";
}
}
</script>
</head>
<body onload="slideIn()">
<H1 ID="tip" style="left:-1000px"> Tip of the week</H1>
<P>Animating text from off screen
</body>
</html>


Попробовал во всех популярных браузерах. Не могу понять в чём причина. Подскажите почему так происходит.

Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 14.11.2010, 22:48
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

1. Используйте position:absolute
2. document.all - устаревшая форма записи
3. не указаны единицы измерения
4. говнокод взятый из сомнительных источников не может работать корректно!

Последний раз редактировалось monolithed, 14.11.2010 в 22:52.
Ответить с цитированием
  #3 (permalink)  
Старый 14.11.2010, 22:58
Новичок на форуме
Отправить личное сообщение для nickolasha Посмотреть профиль Найти все сообщения от nickolasha
 
Регистрация: 14.11.2010
Сообщений: 5

тут мне больше интересует не сам код, а почему нельзя прочитать позиционирование left, если он объявлен в тэге <style> или css-файле(это кстати по идее относится и к другим свойствам)
НО, эти свойства применяются(!)

и почему они читаются если объявлены inline(внутри тэгов в аттрибуте style).
Вот это я хотел бы понять.
Ответить с цитированием
  #4 (permalink)  
Старый 14.11.2010, 23:04
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от nickolasha
тут мне больше интересует не сам код, а почему нельзя прочитать позиционирование left, если он объявлен в тэге <style> или css-файле(это кстати по идее относится и к другим свойствам)
Сообщение от monolithed
3. не указаны единицы измерения
Навскидку:

<style type="text/css">
div {
    background: blue;
    position: absolute;
    color: white;
    text-align: center;
    width: 100px;
    height: 100px;
}
</style>

<script type="text/javascript">
window.onload = function(){
    var i = 0;
    (function(){
        if(++i <= 300){
           var element =  document.getElementsByTagName('div')[0];
           element.style.left= i+'px';
           element.innerHTML = parseInt(i/3)+'%';
           setTimeout(arguments.callee, 10);
        }
    })();
};
</script>
<div></div>

Последний раз редактировалось monolithed, 14.11.2010 в 23:26.
Ответить с цитированием
  #5 (permalink)  
Старый 14.11.2010, 23:19
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

http://javascript.ru/blog/Andrej-Par...cheniya-stilya
Ответить с цитированием
  #6 (permalink)  
Старый 14.11.2010, 23:22
Новичок на форуме
Отправить личное сообщение для nickolasha Посмотреть профиль Найти все сообщения от nickolasha
 
Регистрация: 14.11.2010
Сообщений: 5

Сообщение от monolithed Посмотреть сообщение
Навскидку:

<style type="text/css">
div {
    background: blue;
    position: absolute;
    color: white;
    text-align: center;
    width: 100px;
    height: 100px;
}
</style>

<div></div>

<script type="text/javascript">
window.onload = function(){
    var i = 0;
    (function(){
        if(++i <= 300){
           var element =  document.getElementsByTagName('div')[0];
           element.style.left= i+'px';
           element.innerHTML = parseInt(i/3)+'%';
           setTimeout(arguments.callee, 10);
        }
    })();
};
</script>

дело не в единицах измерения(пробовал и с ними и без), и твой пример не отвечает на мой вопрос, и он не работает к тому же:


Сведения об ошибке на веб-странице

Агент пользователя: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)
штамп времени: Sun, 14 Nov 2010 20:27:02 UTC


Сообщение: 'style' - есть null или не является объектом
Строка: 32
Символ: 8
Код: 0
Ответить с цитированием
  #7 (permalink)  
Старый 14.11.2010, 23:24
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от nickolasha
и он не работает к тому же:


На кнопку просматреть пробовал нажать?
Ответить с цитированием
  #8 (permalink)  
Старый 14.11.2010, 23:35
Новичок на форуме
Отправить личное сообщение для nickolasha Посмотреть профиль Найти все сообщения от nickolasha
 
Регистрация: 14.11.2010
Сообщений: 5

Сообщение от Kolyaj Посмотреть сообщение
http://javascript.ru/blog/Andrej-Par...cheniya-stilya
Спасибо. Это кое-что проясняет.

а такой вопрос: интересно, раньше тот пример работал, если его опубликовали? раньше были доступны значения стиля без этих методов(currentStyle или getComputedStyle)?
Ответить с цитированием
  #9 (permalink)  
Старый 15.11.2010, 01:09
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Сообщение от nickolasha
почему нельзя прочитать позиционирование left, если он объявлен в тэге <style> или css-файле(это кстати по идее относится и к другим свойствам)
[element].style - это свойство, дающее доступ к атрибуту style. Если записать в него какой-либо стиль, то он примениться. Но объект CSSStyleDeclaration не синхронизируется со стилями, объявленными в теге <style> или css-файле. Т.е. если, например, записать что-то в теге <style>, это ведь не создает в соответствующих тегах атрибут style
UPD Так вот это я к тому, что все свойства по умолчанию - пустая строка. И если просто обратиться element.style.left, то получите "" (пустую строку)

Последний раз редактировалось Sweet, 15.11.2010 в 01:45.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получится ли колонку посередине? micscr (X)HTML/CSS 13 17.02.2010 01:23