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

у меня естьdiv сid="div_register", Я хочу установить егоwidth динамически в JavaScript.

Я использую следующий код:

<code>getElementById('div_register').style.width=500;
</code>

но эта строка кода не работает.

Я также пытался использовать единицыpx как следующее, все еще не повезло:

<code>getElementById('div_register').style.width='500px';
</code>

а также

<code>getElementById('div_register').style.width='500';
</code>

а также

<code>getElementById('div_register').style.width=500px;
</code>

но ни один из этого кода не работает для меня.

Я не знаю, что происходит не так.

Я использую Mozilla Firefox.

EDIT

<code><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>
</code>
 Tejasva Dhyani12 апр. 2012 г., 08:43
использованиеonclick="show_update_profile()" вместоonclick="javascript:show_update_profile()"
 Saswat12 апр. 2012 г., 08:05
Я установил document.getElementById («div_register»). style.display = «block», а затем установил document.getElementById («div_regsiter»). style.width = «500px»;
 Daniel Szabo12 апр. 2012 г., 08:42
Для чего это стоит, у вас есть опечатки в слове «документ» в строках 3 и 4 вашей функции ... которая определенно помешала бы ей работать.
 Cyclonecode12 апр. 2012 г., 08:04
Вы пытались установить ширину послеonload событие произошло?
 powerMicha12 апр. 2012 г., 08:05
Вы проверили, чтоdiv_register правильный идентификатор вашего элемента? Может быть, дайте нам немного HTML тоже ...style.width="500px"; должен быть прав.

Ответы на вопрос(6)

приведенных ниже примеров:

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

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>
 Saswat12 апр. 2012 г., 11:27
на самом деле в моем сценарии не было ничего плохого ........., потому что я использовал всплывающее окно ... это было оффтопом, потому что мой сценарий работал хорошо все время, используя JavaScript: он работал все хорошо, может быть устаревшим, но это не было ошибкой ... проблема была в динамическом обновлении ширины ... и решение jmort помогло мне найти решение
 12 апр. 2012 г., 09:02
+1 при удалении & quot; javascript: & quot ;. Это устаревшая конструкция из давно минувших дней Web 1.0.
 Saswat12 апр. 2012 г., 11:21
мне нужно div_fade
 12 апр. 2012 г., 11:23
Затем, пожалуйста, добавьте его в ваш пример, иначе скрипт не удастся - кстати: вы знаетеFirebug плагин для Firefox? Это вам очень поможет
 12 апр. 2012 г., 12:02
Конечно. Я просто хотел отметить, что эти части отсутствовали в примере, что приводит к другим проблемам. Так что теперь все хорошо

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

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

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

Решение Вопроса

Chrome и других браузерах, отличных от IE. Чтобы это работало во всех браузерах, я также предлагаю добавить следующее:

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

Для кросс-совместимости вам все равно нужно будет использовать свойство. Заказ также может иметь значение. Например, в моем коде при установке свойств стиля с помощью JavaScript я сначала устанавливаю атрибут style, а затем задаю свойства:

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

 12 апр. 2012 г., 08:07
Разве это не переопределяет все другие атрибуты стиля? Как уже упоминалось в комментарии к вопросу,display: block был также установлен.
 12 апр. 2012 г., 08:10
Установите все сразу при использовании атрибута стиля. В моем примере из моего собственного проверенного и рабочего кода, я положилdisplay:block;cursor:pointer;cursor:hand все в одном вызове setAttribute. Если вы хотите, чтобы ваша жизнь была проще, используйте прогрессивную библиотеку JavaScript, такую как jQuery. Единственная причина, по которой я использовал сырой JavaScript в своем коде, заключается в том, что он был предназначен для встраивания кода на клиентские веб-сайты, поэтому фактическая среда будет отличаться от сайта к сайту, и самый простой способ избежать конфликтов между библиотеками - это просто не использовать их.
 12 апр. 2012 г., 08:51
@jmort: +1. Но только во имя точности, Chrome / FireFox / Safari все поддерживают манипулирование рассматриваемыми атрибутами (например: element.style.height, element.style.width и т. Д.)
 12 апр. 2012 г., 08:18
Я добавил еще один пример, который использует атрибуты класса. Этот метод следует правилу отделения вашего контента (HTML) от вашего поведения (JavaScript) и вашей презентации (CSS). Кроме того, он абстрагирует фактические детали стиля, предоставляя его легко работать с className.
 12 апр. 2012 г., 08:56
Хм, я знаю, что в моем собственном коде, чтобы он хорошо работал с IE7, мне пришлось выполнить несколько очень специфических шагов, которые были обнаружены в результате очень болезненных проб и ошибок. Возможно, IE7 не будет работать должным образом с setAttribute ... Я не помню точно, поэтому я оставлю это в качестве упражнения для читателя и удалю часть о chrome / FF и т. Д. Я знаю код работает, даже если я не могу объяснить это правильно. :)

span!

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

Изменитьspan кdiv.

 02 дек. 2016 г., 15:05
Странно, это было год назад, поэтому не уверен, почему либо !! ^ _ ^
 30 нояб. 2016 г., 14:38
Вопрос никогда не упоминалspanи ни один ответ не предложил использовать один либо. Я не вижу, как этот ответ помогает вообще.
 08 сент. 2016 г., 05:38
Это потому чтоspan является встроенным элементом по умолчанию, и, следовательно, не будет соответствовать никаким установленным для него размерам. Изменение его CSS наdisplay: block, display: flex, или жеdisplay: inline-block заставит его работать должным образом, какdiv (элемент блока по умолчанию).

Ваш ответ на вопрос