Изменение ширины блока через яваскрипт

@mishachasha · Регистрация: 29.05.2013

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

Вообщем хочу сделать чтобы при загрузки страницы высчитывалось разрешение экрана пользователя а потом полученное значение использовалось для самого высшего блока для осуществления резинового каркаса.Продемонстрировать работу кода с шириной тяжело поэтому хочу на примере цвета границы если.
Если разрешение экрана больше 1000 то цвет границы меняется с черного на красный.

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
<!DOCTYPE html>
<html>
<head>
<title>Viconte</title>
<style type="text/css">
#targetDiv
{
    border:2px solid #000;
}
</style>
</head>
  <body>
    <script>
        var height=0;
        var width=0;
        width = screen.width;
        height = screen.height;
        if (width>1000)
        {
            document.getElementById('targetDiv').style.border = '1px solid red';            
            }
    </script>
      <div id='targetDiv'>Изменим стиль этого элемента</div>
   </body>
</html>

Добавлено через 1 час 7 минут

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
<!DOCTYPE html>
<html>
<head>
<title>Viconte</title>
<style type="text/css">
#targetDiv {
    border:#F0F solid 2px;
}
</style>
</head>
  <body>
  <script type="text/javascript">
window.onload = function() 
{
        var height=0;
        var width=0;
        width = screen.width;
        height = screen.height;
        document.getElementById('targetDiv').style.border = '1px solid red';
};
</script>
      <div id="targetDiv">Изменим стиль этого элемента</div>
   </body>
</html>

помогло частично вот так но не понятно как мне быть с шириной

JavaScript
1
document.getElementById('targetDiv').style.width = 'width??????????????';

Добавлено через 9 минут
Урррррррррааааааааааааааааааааааааа
заработало вот так:

JavaScript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
window.onload = function() 
{
    var height=0;
        var width=0;
        width = screen.width;
    height = screen.height;
        document.getElementById('border').style.width=width+'px';
};
</script>

@kalabuni · 30.05.2013, 07:19

mishachasha, размеры экрана screen.width и screen.height вас должны мало волновать

больше внимание уделяйте размерам открытого окна - оно ведь может быть открыто лишь вполовину экрана (а то и меньше)
и тогда все ваши вычисления - коту под хвост

так что юзайте document.body.clientWidth и document.body.clientHeight
но учтите, что эти свойства будут доступны лишь после открытия тега <body>
т.е. либо функция по onload, либо скриптовой блок сразу после открывающего тега <body>

@mishachasha · 30.05.2013, 11:12 **[ТС]**

Т.е как я понял должно быть как то так?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Viconte</title>
</head>
<body>
    <script type="text/javascript">
    window.onload = function() 
    {
        var height=0;
        var width=0;
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    document.getElementById('border').style.width=width+'px';
    };
    </script>
      <div id="targetDiv">Изменим стиль этого элемента</div>
</body>
</html>

Добавлено через 1 час 34 минуты
Блин респект тебе,kalabuni

все получилось как надо,вот бы еще не нужно было обновлять страницу для обновления параметров ширины при изменение окна браузера, а так круто.спс

@kalabuni · 30.05.2013, 13:30

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

вот бы еще не нужно было обновлять страницу для обновления параметров ширины при изменение окна браузера

да нет проблем
вашу безымянную функцию, как она есть, поименуйте, например так:

JavaScript
1
2
3
4
function myFunc ()
{
// ваш код один к одному
}

и затем пропишите две строки:

JavaScript
1
2
onload = myFunc;
onresize = myFunc; // это как раз для автоматического обновления при изменении размеров окна

@mishachasha · 30.05.2013, 13:38 **[ТС]**

низкий поклон.

то что доктор прописал.Спасибо огромное

@mishachasha · 13.06.2013, 20:45 **[ТС]**

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

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Всолике.бу-добавить объявление</title>
<style type="text/css">
div {
    border:2px solid    #333;
    display:none;
    }
 
</style>
<script type="text/javascript">
function OnOff(obj)
{   
    document.getElementById(obj.value).style.display="block";
}
</script>
</head>
 
<body>
Выберите раздел куда вы хотите добавить свое объявление
  <label for="select"></label>
  <select name="menu" id="select" onChange="OnOff(this);">
    <option value="phones">Мобильные телефоны</option>
        <option value="photo_video">Цифровые фотоапараты и видеокамеры</option>
            <option value="nootebook">Ноутбуки</option>
                <option value="netbook">Нетбуки</option>
                    <option value="pk">Персональные компьютеры</option>
                        <option value="washingmachine">Стиральные машины</option>
                            <option value="holodilnik">Холодильники</option>
                                <option value="microwave">Микроволновые печи</option>
                                    <option value="tv">Телевизоры</option>
  </select>
        <div id="phones">Мобильные телефоны</div>
            <div id="photo_video">Цифровые фотоапараты и видеокамеры</div>
                <div id="nootebook">Ноутбук</div>
                    <div id="netbook">Нетбук</div>
                        <div id="pk">Персональные компьютеры</div>
                            <div id="washingmachine">Стиральные машины</div>
                                <div id="holodilnik">Холодильники</div>
                                    <div id="microwave">Микроволновые печи</div>
                                        <div id="tv">Телевизоры</div>
                    
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	30.05.2013, 07:19
	mishachasha, размеры экрана screen.width и screen.height вас должны мало волновать больше внимание уделяйте размерам открытого окна - оно ведь может быть открыто лишь вполовину экрана (а то и меньше) и тогда все ваши вычисления - коту под хвост так что юзайте document.body.clientWidth и document.body.clientHeight но учтите, что эти свойства будут доступны лишь после открытия тега <body> т.е. либо функция по onload, либо скриптовой блок сразу после открывающего тега <body> 1

@mishachasha 0 / 0 / 0 Регистрация: 29.05.2013 Сообщений: 10
	30.05.2013, 13:38 [ТС]
	низкий поклон.то что доктор прописал.Спасибо огромное 0

Опции темы