Как получить данные стиля?

Azerrot

Всем привет, пожалуйста объясните почему не получатся получить данные определенные в стиле для элемента и вывести их? К примеру
<html>
<head>
<style>
#block{
height:200px;
width:200px;
}
</style>
</head>
<body>
<div id="block"></div>
<script>
document.write(document.getElementById("block").style.width);
</script>
</body>
</html>
В итоге ничего на экран не выведется. Объясните почему он не хочет брать данные из стиля, как этот код тогда должен выглядеть?
3 ответа

Azerrot

Спасибо, а я через свойство offset сделал уже, из него тоже в принципе можно получить значение стиля элемента. Просто хотел попробовать сделать программку с прыгающим квадратом вот что получилось... ______________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#bk_1{
    position:absolute;
    left:100px;
    top:100px;
    width:100px;
    height:100px;
    border:solid 1px black;
}
#bk_2{
    position:absolute;
    left:450px;
    top:250px;
    width:100px;
    height:100px;
    border:solid 1px black;
}
#run_bk{
    position:absolute;
    background-color:grey;
    left:200px;
    top:450px;
    width:100px;
    height:100px;
    }
 
</style>
<title>Документ без названия</title>
 
 
 
</head>
<div id="bk_1"></div>
<div id="bk_2"></div>
<div id="run_bk"></div>
[JS]<script type="text/javascript">
var blok_1 = document.getElementById("bk_1");
var blok_2 = document.getElementById("bk_2");
var run_blok = document.getElementById("run_bk");
var position=0;
function go_blok(){
if((run_blok.offsetLeft!=blok_1.offsetLeft||run_blok.offsetTop!=blok_1.offsetTop)&&position==0) {
    
    if(run_blok.offsetLeft>blok_1.offsetLeft){
         run_blok.style.left=run_blok.offsetLeft-1+'px';
        }
        else if(run_blok.offsetLeft<blok_1.offsetLeft){
         run_blok.style.left=run_blok.offsetLeft+1+'px';
            }
            
    if(run_blok.offsetTop>blok_1.offsetTop){
         run_blok.style.top=run_blok.offsetTop-1+'px';      
        }
        else if(run_blok.offsetTop<blok_1.offsetTop){
         run_blok.style.top=run_blok.offsetTop+1+'px';          
            }
    if(run_blok.offsetLeft==blok_1.offsetLeft&&run_blok.offsetTop==blok_1.offsetTop){ position=1;   run_blok.style.background="#003";}
 
}///***********************
 
 
if((run_blok.offsetLeft!=blok_2.offsetLeft||run_blok.offsetTop!=blok_2.offsetTop)&&position==1) {
 
    if(run_blok.offsetLeft>blok_2.offsetLeft){
         run_blok.style.left=run_blok.offsetLeft-1+'px';
        }
        else if(run_blok.offsetLeft<blok_2.offsetLeft){
         run_blok.style.left=run_blok.offsetLeft+1+'px';
            }
            
    if(run_blok.offsetTop>blok_2.offsetTop){
         run_blok.style.top=run_blok.offsetTop-1+'px';      
        }
        else if(run_blok.offsetTop<blok_2.offsetTop){
         run_blok.style.top=run_blok.offsetTop+1+'px';          
            }
    if(run_blok.offsetLeft==blok_2.offsetLeft&&run_blok.offsetTop==blok_2.offsetTop){ position=0;   run_blok.style.background="maroon"; }
 
}///***********************
 
}
</script>[/JS]
<input type="button" value="Start test" onclick="setInterval(go_blok,10);"/>
<body>
</body>
</html>


Azerrot

я через свойство offset сделал уже, из него тоже в принципе можно получить значение стиля элемента
через offset'ы можно получить только габариты тега - высоту и ширинук свойствам стиля это никакого отношения не имеетнасчёт стиля почитайте здесь


Azerrot

Если стиль для элемента задан в самом теге с помощью атрибута style, то данный стиль можно получить способом
element.style.property
Если же у элемента стили находятся в отдельной таблице, то получить нужное свойство можно так:
getComputedStyle(element, '').property;