Установка ширины и высоты DIV в JavaScript

У меня есть 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.

ИЗМЕНИТЬ

<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>

ОТВЕТЫ

Ответ 1

Свойства, которые вы используете, могут не работать в браузерах 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).

Ответ 2

Это несколько способов применить стиль к элементу. Попробуйте любой из приведенных ниже примеров:

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';

Ответ 3

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

Для точек коричневого цвета вы также должны проверить element.addEventListener для назначения обработчиков событий вашим элементам.

Ответ 4

Если вы удалите префикс 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>

Ответ 5

Будьте осторожны с span!

myspan.styles.width='100px' не хочет работать.

Измените span на div.

Ответ 6

Атрибут onclick кнопки принимает строку JavaScript, а не href, как вы указали. Просто удалите часть "javascript:".