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

@Azerrot · Регистрация: 31.12.2012

Студворк — интернет-сервис помощи студентам

Всем привет, пожалуйста объясните почему не получатся получить данные определенные в стиле для элемента и вывести их?
К примеру

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

В итоге ничего на экран не выведется. Объясните почему он не хочет брать данные из стиля, как этот код тогда должен выглядеть?

@vovandr · 14.01.2014, 11:18

Если стиль для элемента задан в самом теге с помощью атрибута style, то данный стиль можно получить способом

JavaScript
1
element.style.property

Если же у элемента стили находятся в отдельной таблице, то получить нужное свойство можно так:

JavaScript
1
getComputedStyle(element, '').property;

@Azerrot · 14.01.2014, 14:17 **[ТС]**

Спасибо, а я через свойство offset сделал уже, из него тоже в принципе можно получить значение стиля элемента. Просто хотел попробовать сделать программку с прыгающим квадратом вот что получилось...
______________________________

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!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>

@kalabuni · 14.01.2014, 16:33

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

я через свойство offset сделал уже, из него тоже в принципе можно получить значение стиля элемента

через offset'ы можно получить только габариты тега - высоту и ширину

к свойствам стиля это никакого отношения не имеет

насчёт стиля почитайте здесь

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .