Ustawianie szerokości i wysokości DIV w JavaScript

108

Mam divz id="div_register". Chcę ustawić go widthdynamicznie w JavaScript.

Używam tego kodu:

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

ale ta linia kodu nie działa.

Próbowałem też użyć takich jednostek, pxjak poniżej, nadal bez powodzenia:

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

i

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

i

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

ale żaden z tych kodów nie działa dla mnie.

Nie wiem, co się dzieje.

Używam przeglądarki Mozilla Firefox.

EDYTOWAĆ

<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

— Saswat
źródło

Czy próbowałeś ustawić szerokość po onloadwystąpieniu zdarzenia?

— Cyclonecode

1

Czy sprawdziłeś, czy div_registerto właściwy identyfikator Twojego elementu? Może daj nam też trochę html ... style.width="500px";powinno być dobrze.

— powerMicha

Ustawiłem document.getElementById ('div_register'). style.display = 'block', a następnie ustawiłem document.getElementById ('div_regsiter'). style.width = '500px';

— Saswat

1

Co jest warte, masz literówki w słowie „dokument” w wierszach 3 i 4 funkcji ... co z całą pewnością uniemożliwiłoby jej działanie.

— Daniel Szabo,

1

użyj onclick="show_update_profile()"zamiastonclick="javascript:show_update_profile()"

— Tejasva Dhyani

227

Właściwości, których używasz, mogą nie działać w przeglądarkach Firefox, Chrome i innych przeglądarkach innych niż IE. Aby to działało we wszystkich przeglądarkach, sugeruję również dodanie następujących elementów:

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

Aby zapewnić zgodność krzyżową, nadal będziesz musiał używać właściwości. Porządek też może mieć znaczenie. Na przykład w moim kodzie, ustawiając właściwości stylu w JavaScript, najpierw ustawiam atrybut stylu, a następnie ustawiam właściwości:

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

Dlatego najbardziej kompatybilnym z różnymi przeglądarkami przykładem byłoby:

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

Chcę również zwrócić uwagę, że znacznie łatwiejszą metodą zarządzania stylami jest użycie selektora klas CSS i umieszczenie stylów w zewnętrznych plikach CSS. Twój kod będzie nie tylko łatwiejszy w utrzymaniu, ale także zaprzyjaźnisz się z projektantami stron internetowych!

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

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

.hide {
    display:none;
}

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

Teraz mogę łatwo dodawać i usuwać atrybut klasy, jedną właściwość, zamiast wywoływać wiele właściwości. Ponadto, jeśli Twój projektant sieci Web chce zmienić definicję tego, co to znaczy być szerokim, nie musi grzebać w pięknie utrzymanym kodzie JavaScript. Twój kod JavaScript pozostaje nietknięty, ale motyw Twojej aplikacji można łatwo dostosować.

Ta technika jest zgodna z zasadą oddzielania treści (HTML) od zachowania (JavaScript) i prezentacji (CSS).

— jmort253
źródło

1

Czy to nie zastąpi wszystkich innych atrybutów stylu? Jak wspomniano w komentarzu do pytania, display: blockzostał również ustalony.

— powerMicha

2

Ustaw wszystko naraz, używając atrybutu style. W moim przykładzie z mojego własnego, przetestowanego i działającego kodu, umieściłem display:block;cursor:pointer;cursor:handwszystko w tym samym wywołaniu setAttribute. Jeśli chcesz, aby Twoje życie było łatwiejsze, użyj progresywnej biblioteki JavaScript, takiej jak jQuery. Jedynym powodem, dla którego użyłem surowego JavaScript w moim kodzie, jest to, że służył on do osadzania kodu w witrynach klientów, więc rzeczywiste środowiska różniłyby się w zależności od witryny, a najłatwiejszym sposobem uniknięcia konfliktów bibliotek na wolności jest po prostu ich nie używanie.

— jmort253

1

Dodałem kolejny przykład, który używa atrybutów klas. Ta technika jest zgodna z zasadą oddzielania treści (HTML) od zachowania (JavaScript) i prezentacji (CSS). Oddziela również rzeczywiste szczegóły stylizacji, nadając mu łatwą w obsłudze nazwę klasy.

— jmort253

@jmort: +1. Ale tylko w imię dokładności, Chrome / FireFox / Safari wszystkie obsługują manipulację atrybutami, o których mowa (np. Element.style.height, element.style.width itp.)

— Daniel Szabo

Hmmm, wiem, że w moim własnym kodzie, aby dobrze grać z IE7, musiałem wykonać kilka bardzo konkretnych kroków, które zostały odkryte podczas bardzo bolesnych prób i błędów. Możliwe, że IE7 nie działałby poprawnie z setAttribute ... Nie pamiętam dokładnie, więc zostawię to jako ćwiczenie dla czytelnika i usunę część o chrome / FF itp. Znam kod działa, nawet jeśli nie wyjaśniam tego poprawnie. :)

— jmort253

14

Istnieje kilka sposobów nadawania stylu elementowi. Wypróbuj jeden z poniższych przykładów:

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

— Valli69
źródło

1

Popraw literówki w swoim kodzie („dokument” jest źle zapisany w wierszach 3 i 4 funkcji i zmień procedurę obsługi zdarzenia onclick na: onclick = „show_update_profile ()”, a wszystko będzie dobrze. Naprawdę powinieneś postępować zgodnie z jmorta i po prostu skonfiguruj 2 klasy css, między którymi przełączasz się w javascript - znacznie ułatwiłoby to Ci życie i uchroniłoby się przed dodatkowym wpisywaniem. Literówki, które popełniłeś, są doskonałym przykładem tego, dlaczego tak jest lepiej podejście.

Aby uzyskać dodatkowe punkty, powinieneś również sprawdzić element.addEventListener do przypisywania programów obsługi zdarzeń do elementów.

— Daniel Szabo
źródło

0

Jeśli usuniesz javascript:prefiks i usuniesz części dla nieznanych identyfikatorów, takie jak 'black_fade'z kodu javascript, powinno to działać w przeglądarce Firefox

Skrócony przykład:

<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
źródło

+1 po usunięciu „javascript:”. To jest przestarzała konstrukcja z dawno minionych czasów Web 1.0.

— jmort253

Następnie dodaj go do swojego przykładu, w przeciwnym razie skrypt się nie powiedzie - przy okazji: czy znasz Firebugwtyczkę do Firefoksa? To ci bardzo pomoże

— powerMicha

w rzeczywistości nie było nic złego w moim skrypcie ......... ponieważ używałem wyskakującego okienka ... to było offtopic, ponieważ mój skrypt działał dobrze przez cały czas, używając javascript: działał dobrze, może być jego przestarzałym, ale to nie był błąd ... problem polegał na dynamicznej aktualizacji szerokości ... a rozwiązanie jmort pomogło mi znaleźć rozwiązanie

— Saswat

Pewnie. Chciałem tylko zaznaczyć, że w przykładzie brakowało tych części, co prowadzi do innych problemów. Więc teraz wszystko jest w porządku

— powerMicha

-1

onclickAtrybut przycisku wykonuje ciąg JavaScriptu, a nie href jak podałeś. Po prostu usuń część „javascript:”.

— jpsimons
źródło

-1

Uważaj span!

myspan.styles.width='100px' nie chce pracować.

Zmień spanDo div.

— Andy B.
źródło

1

Dzieje się tak, ponieważ spandomyślnie jest to element wbudowany i dlatego nie jest zgodny z żadnym ustawionym na nim rozmiarami. Zmiana CSS na display: block, display: flexlub display: inline-blockspowoduje, że będzie działał poprawnie, tak jak div(domyślnie element blokowy).

— Daniel T.

2

Pytanie nigdy nie wspominało o rozpiętości i żadna odpowiedź nie sugerowała jej użycia. Nie rozumiem, jak ta odpowiedź w ogóle pomaga.

— Vince Bowdren

1

Dziwne, to było rok temu, więc też nie wiem dlaczego !! ^ _ ^

— Andy B

1

I zmień styles.widthna style.width. :)

— RiZKiT