Встановлення ширини та висоти DIV в JavaScript

108

У мене є divс id="div_register". Я хочу widthдинамічно встановити його в JavaScript.

Я використовую такий код:

getElementById('div_register').style.width=500;

але цей рядок коду не працює.

Я також спробував використовувати наступні блоки, pxяк і раніше, не пощастило:

getElementById('div_register').style.width='500px';

і

getElementById('div_register').style.width='500';

і

getElementById('div_register').style.width=500px;

але жоден із цього коду для мене не працює.

Я не знаю, що йде не так.

Я використовую Mozilla Firefox.

EDIT

<html>
    <head>
        <title>Untitled</title>
        <script>
            function show_update_profile() {
                document.getElementById('black_fade').style.display='block';
                //document.getElementById.('div_register').style.left=((window.innerWidth)-500)/20;
                document.getElementById('div_register').style.height= "500px";
                document.getElementById('div_register').style.width= '500px';
                //alert('kutta');
                  document.getElementById('div_register').style.display='block';
                document.getElementById('register_flag').value= 1;
                document.getElementById('physical_flag').value= 0;
                document.getElementById('cultural_flag').value= 0;
                document.getElementById('professional_flag').value= 0;
                document.getElementById('lifestyle_flag').value= 0;
                document.getElementById('hobby_flag').value= 0;
                //alert(window.innerWidth);
            }
        </script>
        <style>
            .white_content {
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="button" onclick="javascript:show_update_profile();" id="show" name="show" value="show"/>
        </div>
        <div id="div_register">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                      welcome 
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

javascript

— Сасват
джерело

Ви намагалися встановити ширину після onloadподії?

— Cyclonecode

1

Ви перевірили, що div_registerце правильний ідентифікатор вашого елемента? Може, дайте нам трохи html ... також style.width="500px";має бути правильно.

— powerMicha

я встановив document.getElementById ('div_register'). style.display = 'блок', а потім встановив document.getElementById ('div_regsiter'). style.width = '500px';

— Сасват

1

Наскільки це варте, ви маєте помилки в слові "документ" у рядках 3 та 4 вашої функції ... що, безумовно, не дозволить йому працювати.

— Даніель Сабо

1

використовувати onclick="show_update_profile()"замістьonclick="javascript:show_update_profile()"

— Tejasva Dhyani

227

Властивості, які ви використовуєте, можуть не працювати в Firefox, Chrome та інших браузерах, які не належать до IE. Щоб зробити цю роботу у всіх браузерах, я також пропоную додати наступне:

document.getElementById('div_register').setAttribute("style","width:500px");

Для перехресної сумісності вам потрібно буде використовувати властивість. Замовлення також може мати значення. Наприклад, у своєму коді під час встановлення властивостей стилю за допомогою JavaScript спочатку встановлюю атрибут стилю, а потім встановлюю властивості:

document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;");
document.getElementById("mydiv").style.display = "block";
document.getElementById("mydiv").style.cursor = "hand";

Таким чином, найбільш прикладним для вас прикладом для веб-переглядачів буде:

document.getElementById('div_register').setAttribute("style","display:block;width:500px");
document.getElementById('div_register').style.width='500px';

Я також хочу зазначити, що набагато простішим методом управління стилями є використання селектора класів CSS та розміщення ваших стилів у зовнішніх файлах CSS. Не тільки ваш код буде набагато більш ретельним, але ви насправді подружитеся з веб-дизайнерами!

document.getElementById("div_register").setAttribute("class","wide");

.wide {
    display:block;
    width:500px;
}

.hide {
    display:none;
}

.narrow {
    display:block;
    width:100px;
}

Тепер я можу легко просто додати та видалити атрибут класу, одну єдину властивість, а не викликати декілька властивостей. Крім того, коли ваш веб-дизайнер хоче змінити визначення того, що означає бути широким, йому або їй не потрібно кидатись у ваш прекрасно підтримуваний код JavaScript. Ваш код JavaScript залишається недоторканим, проте тему вашої програми можна легко налаштувати.

Ця методика дотримується правила відокремлення вашого вмісту (HTML) від вашої поведінки (JavaScript) та вашої презентації (CSS).

— jmort253
джерело

1

Невже це не замінить усі інші атрибути стилю? Як зазначалося в коментарі до питання, display: blockтакож було встановлено.

— powerMicha

2

Встановіть все відразу при використанні атрибуту стилю. У своєму прикладі з мого власного тестованого та робочого коду я ставлю display:block;cursor:pointer;cursor:handвсе в один і той же setAttribute call. Якщо ви хочете, щоб ваше життя було простішим, використовуйте прогресивну бібліотеку JavaScript, наприклад jQuery. Єдина причина, в якій я використовував сирий JavaScript у своєму коді, - це те, що він був вбудованим кодом на веб-сайтах клієнтів, тому реальна середовище відрізнятиметься від сайту до сайту, а найпростіший спосіб уникнути конфліктів бібліотек у дикій природі - просто не використовувати їх.

— jmort253

1

Я додав ще один приклад, який використовує атрибути класу. Ця методика дотримується правила відокремлення вашого вмісту (HTML) від вашої поведінки (JavaScript) та вашої презентації (CSS). Він також абстрагує фактичні деталі стилю, надаючи йому простий у роботі з className.

— jmort253

@jmort: +1. Але саме в ім’я точності, Chrome / FireFox / Safari всі підтримують маніпулювання відповідними атрибутами (наприклад: element.style.height, element.style.width і т.д.)

— Даніель Сабо

Гммм, я знаю, що в своєму власному коді, щоб змусити його грати добре з IE7, мені довелося дотримуватися деяких дуже конкретних кроків, які були виявлені через дуже болісні спроби та помилки. Можливо, IE7 не буде працювати належним чином із setAttribute ... Я точно не пам’ятаю, тому я залишу це як вправу для читача і видаляю частину про chrome / FF тощо. Я знаю код працює, навіть якщо я можу не пояснити це правильно. :)

— jmort253

14

Це кілька способів застосувати стиль до елемента. Спробуйте будь-який із наведених нижче прикладів:

1. document.getElementById('div_register').className = 'wide';
  /* CSS */ .wide{width:500px;}
2. document.getElementById('div_register').setAttribute('class','wide');
3. document.getElementById('div_register').style.width = '500px';

— Валлі69
джерело

1

Виправте помилки в коді ("документ" написано неправильно на рядках 3 та 4 вашої функції та змініть обробник подій onclick таким чином, щоб він читав: onclick = "show_update_profile ()", і тоді ви будете добре. Справді слід дотримуватися Порада jmort та просто налаштувати 2 класи css, які ви перемикаєтесь у javascript - це полегшить ваше життя та вбереже себе від усіх зайвих наборів текстів. Опечатки, які ви зробили, - це прекрасний приклад того, чому це краще підхід.

Для очок брауні ви також повинні перевірити element.addEventListener для присвоєння обробникам подій вашим елементам.

— Даніель Сабо
джерело

0

Якщо ви вилучите javascript:префікс і видаліть деталі з невідомих ідентифікаторів, як-от 'black_fade'зі свого коду javascript, це має працювати у firefox

Зведений приклад:

<html>
    <head>
        <script type="text/javascript">
            function show_update_profile() {
               document.getElementById('div_register').style.height= "500px";
               document.getElementById('div_register').style.width= "500px";
               document.getElementById('div_register').style.display='block';
               return true;
           }
        </script>
        <style>
           /* just to show dimensions of div */
           #div_register
           {
                background-color: #cfc;
           }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="button" onclick="show_update_profile();" value="show"/>
        </div>
        <div id="div_register">
            <table>
                <tr>
                   <td>
                     welcome 
                   </td>
                </tr>
            </table>
        </div>
    </body>
</html>

— powerMicha
джерело

+1 про видалення "javascript:". Це застаріла конструкція з давно минулих днів Web 1.0.

— jmort253

Потім додайте його до свого прикладу, інакше сценарій не вдасться - btw: Чи знаєте ви Firebugплагін для Firefox? Це вам дуже допоможе

— powerMicha

Насправді в моєму сценарії нічого поганого не було ......... becaquse, я використовував спливаюче вікно .... це офтопік, тому що мій сценарій працював добре весь час, використовуючи JavaScript: він працював усе добре, може будьте його застарілим, але це не було помилкою ... проблема полягала в оновленні динаміки ширини ... і рішення jmort допомогло мені знайти рішення

— Сасват

Звичайно. Я просто хотів зазначити, що ці деталі були відсутні у прикладі, що призводить до інших проблем. Так що все зараз добре

— powerMicha

-1

onclickАтрибут кнопки приймає рядок JavaScript, а НЕ HREF , як ви надали. Просто видаліть частину "javascript:".

— jpsimons
джерело

-1

Будьте уважні span!

myspan.styles.width='100px' не хоче працювати.

Змініть spanна a div.

— Енді Б
джерело

1

Це тому span, що за замовчуванням є вбудованим елементом, і тому він не підкоряється жодному набору розмірів на ньому. Зміна CSS на display: block, display: flexабо display: inline-blockпризведе до того, що він буде працювати належним чином так само, як div(блок за замовчуванням).

— Даніель Т.

2

Питання ніколи не згадувало жодного проміжку часу , і жодна відповідь не пропонувала використовувати його також. Я не бачу, як ця відповідь взагалі допомагає.

— Вінс Боудрен

1

Дивно, це було рік тому, так що не впевнений, чому! ^ _ ^

— Енді Б

1

І змінити styles.widthна style.width. :)

— RiZKiT