Impostazione di larghezza e altezza DIV in JavaScript

108

Ho un divcon id="div_register". Voglio impostarlo widthdinamicamente in JavaScript.

Sto usando questo codice seguente:

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

ma questa riga di codice non funziona.

Ho anche provato a utilizzare le unità pxcome le seguenti, ancora senza fortuna:

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

e

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

e

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

ma nessuno di questo codice funziona per me.

Non so cosa stia andando storto.

Sto usando Mozilla Firefox.

MODIFICARE

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

Hai provato a impostare la larghezza dopo che onloadsi è verificato l' evento?

— ciclonico

1

Hai controllato, che div_registerè l'ID corretto del tuo elemento? Forse dacci anche dell'html ... style.width="500px";dovrebbe essere giusto.

— powerMicha

ho impostato document.getElementById ('div_register'). style.display = 'block', quindi ho impostato document.getElementById ('div_regsiter'). style.width = '500px';

— Saswat

1

Per quel che vale, hai degli errori di battitura nella parola "documento" nelle righe 3 e 4 della tua funzione ... il che ne impedirebbe sicuramente il funzionamento.

— Daniel Szabo

1

utilizzare al onclick="show_update_profile()"posto dionclick="javascript:show_update_profile()"

— Tejasva Dhyani

227

Le proprietà che stai utilizzando potrebbero non funzionare in Firefox, Chrome e altri browser non IE. Per farlo funzionare in tutti i browser, suggerisco anche di aggiungere quanto segue:

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

Per la compatibilità incrociata, sarà comunque necessario utilizzare la proprietà. Anche l'ordine può essere importante. Ad esempio, nel mio codice, quando imposto le proprietà di stile con JavaScript, imposto prima l'attributo di stile, quindi imposto le proprietà:

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

Pertanto, l'esempio più compatibile con più browser per te sarebbe:

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

Voglio anche sottolineare che un metodo molto più semplice per gestire gli stili consiste nell'utilizzare un selettore di classi CSS e inserire i tuoi stili in file CSS esterni. Non solo il tuo codice sarà molto più gestibile, ma farai effettivamente amicizia con i tuoi web designer!

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

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

.hide {
    display:none;
}

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

Ora posso semplicemente aggiungere e rimuovere un attributo di classe, una singola proprietà, invece di chiamare più proprietà. Inoltre, quando il tuo web designer vuole cambiare la definizione di cosa significa essere ampio, non ha bisogno di frugare nel tuo codice JavaScript ben curato. Il tuo codice JavaScript rimane invariato, ma il tema della tua applicazione può essere facilmente personalizzato.

Questa tecnica segue la regola di separare il tuo contenuto (HTML) dal tuo comportamento (JavaScript) e dalla tua presentazione (CSS).

— jmort253
fonte

1

Non sovrascriverà tutti gli altri attributi di stile? Come accennato in un commento alla domanda, è display: blockstato anche fissato.

— powerMicha

2

Imposta tutto in una volta quando usi l'attributo style. Nel mio esempio dal mio codice testato e funzionante, ho inserito display:block;cursor:pointer;cursor:handtutto nella stessa chiamata setAttribute. Se vuoi che la tua vita sia più facile, usa una libreria JavaScript progressiva come jQuery. L'unico motivo per cui ho utilizzato JavaScript grezzo nel mio codice è perché era per il codice incorporato nei siti Web dei client, quindi gli ambienti effettivi sarebbero diversi da sito a sito e il modo più semplice per evitare conflitti di libreria in natura è semplicemente non utilizzarli.

— jmort253

1

Ho aggiunto un altro esempio che utilizza attributi di classe. Questa tecnica segue la regola di separare il tuo contenuto (HTML) dal tuo comportamento (JavaScript) e dalla tua presentazione (CSS). Inoltre astrae i dettagli effettivi dello stile dandogli un nome di classe facile da lavorare.

— jmort253

@jmort: +1. Ma solo in nome della precisione, Chrome / FireFox / Safari supportano tutti la manipolazione degli attributi in questione (es: element.style.height, element.style.width, ecc.)

— Daniel Szabo

Hmmm, so che nel mio codice, per farlo funzionare bene con IE7, ho dovuto seguire alcuni passaggi molto specifici che sono stati scoperti attraverso tentativi ed errori molto dolorosi. Potrebbe essere che IE7 non funzionasse correttamente con setAttribute ... non ricordo esattamente, quindi lo lascerò come esercizio per il lettore e rimuoverò la parte su chrome / FF, ecc. Conosco il codice funziona, anche se potrei non spiegarlo correttamente. :)

— jmort253

14

Esistono diversi modi per applicare lo stile a un elemento. Prova uno degli esempi seguenti:

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
fonte

1

Correggi gli errori di battitura nel tuo codice ("documento" è scritto in modo sbagliato nelle righe 3 e 4 della tua funzione e cambia il gestore di eventi onclick in: onclick = "show_update_profile ()" e poi starai bene. Dovresti davvero seguire il consiglio di jmort e imposta semplicemente 2 classi CSS che puoi passare da una all'altra in javascript: ti renderebbe la vita molto più semplice e ti salverebbe da tutte le battiture extra. Gli errori di battitura che hai commesso sono un perfetto esempio del perché questo è il migliore approccio.

Per i punti brownie, dovresti anche controllare element.addEventListener per assegnare gestori di eventi ai tuoi elementi.

— Daniel Szabo
fonte

0

Se rimuovi il javascript:prefisso e rimuovi le parti per gli ID sconosciuti come 'black_fade'dal tuo codice javascript, dovrebbe funzionare in firefox

Esempio sintetico:

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

+1 sulla rimozione di "javascript:". Questo è un costrutto obsoleto dai tempi ormai lontani del Web 1.0.

— jmort253

Quindi aggiungilo al tuo esempio, altrimenti lo script fallirà - btw: conosci il Firebugplugin per Firefox? Questo ti aiuterà molto

— powerMicha

in realtà non c'era niente di sbagliato nel mio script ......... perché stavo usando una finestra pop-up ... era fuori argomento, perché il mio script ha funzionato bene per tutto il tempo, usando javascript: ha funzionato tutto bene, può essere obsoleto ma questo non era un errore ... il problema era con l'aggiornamento dinamico della larghezza ... e la soluzione di jmort mi ha aiutato a ottenere la soluzione

— Saswat

Sicuro. Volevo solo sottolineare che queste parti mancavano nell'esempio, il che porta ad altri problemi. Quindi va tutto bene ora

— powerMicha

-1

L' onclickattributo di un pulsante accetta una stringa di JavaScript, non un href come hai fornito. Basta rimuovere la parte "javascript:".

— jpsimons
fonte

-1

Stai attento span!

myspan.styles.width='100px' non vuole lavorare.

Cambia spanin a div.

— Andy B
fonte

1

Questo perché spanè un elemento inline per impostazione predefinita e quindi non obbedirà a nessun set di dimensionamento su di esso. Cambiando il suo CSS in display: block, display: flexo lo display: inline-blockfarà funzionare correttamente proprio come un div(un elemento di blocco per impostazione predefinita).

— Daniel T.

2

La domanda non ha mai menzionato un intervallo e nessuna risposta ha suggerito di usarne uno. Non vedo come questa risposta aiuti affatto.

— Vince Bowdren

1

Strano, questo è stato un anno fa quindi non so nemmeno perché !! ^ _ ^

— Andy B

1

E cambia styles.widthin style.width. :)

— RiZKiT