Установка ширины и высоты 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.

РЕДАКТИРОВАТЬ

<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 = 'block', а затем установил document.getElementById ('div_regsiter'). style.width = '500px';

Saswat

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. Если вы хотите, чтобы ваша жизнь была проще, используйте прогрессивную библиотеку 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

Затем добавьте его в свой пример, иначе скрипт не сработает - кстати: вы знаете Firebugплагин для Firefox? Это вам очень

поможет

на самом деле в моем скрипте не было ничего плохого ......... потому что я использовал всплывающее окно ... это было оффтопом, потому что мой скрипт все время работал хорошо, используя javascript: он работал все хорошо, может быть устаревшим, bt это не было ошибкой ... проблема заключалась в динамическом обновлении ширины ... и решение jmort помогло мне

найти

Конечно. Я просто хотел указать, что эти части отсутствуют в примере, что приводит к другим проблемам. Так что теперь все в порядке

powerMicha

-1

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

jpsimons
источник

-1

Осторожно span!

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

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

Энди Б
источник

1

Это связано с тем span, что по умолчанию это встроенный элемент, поэтому он не подчиняется никаким размерам, установленным для него. Изменение его CSS на display: block, display: flexили display: inline-blockзаставит его работать правильно, как div(элемент блока по умолчанию).

Дэниел Т.

2

В вопросе никогда не упоминался диапазон , и в ответе не предлагалось использовать его. Я не понимаю, как этот ответ вообще помогает.

Винс Боудрен

1

Странно, это было год назад, так что тоже не знаю почему !! ^ _ ^

Andy B

1

И поменяйте styles.widthна style.width. :)

RiZKiT

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

Ответы: