usare Javascript per cambiare alcuni valori di style di un div

ho il mio div definito nella pagina HTML con id='pippo'.
ho il mio foglio di stile con tutti gli stili per il div 'pippo'.
ho un evento (onclick), dello stesso siv, che richiama la funzione javascript evidenzia_div(this);

questa funzione vuole mettere un bordo al div. E' qui non c'e' problema.
Poi, vorrei anche ridurre le dimensioni del div (sia height che width) di 2px cadauno.

PROBLEMA: siccome height e width sono impostati nel foglio di stile, andando a recuperare l'oggetto div con

divo = getElementById('pippo');

divo.style.height (e la stessa cosa anche per width) mi ritorna una stinga vuota.

C'e' un modo per recuperare il valore (che e' impostato con il foglio di stile) ?

GRAZIE

puoi modificare l'html con <div style=".... ecc, ci metti tutti i valori che vuoi tu. Fammi sapere...

Citazione:

---

Originalmente inviato da malionepois

puoi modificare l'html con <div style=".... ecc, ci metti tutti i valori che vuoi tu. Fammi sapere...

---

intanto, GRAZIE per la risposta.

Questa alternativa so che funziona, l'ho gia' utilizzata per altra pagina.

Pero' cercavo qualcosa di piu' pulito (cioe' lasciando le impostazioni nel foglio di style).
Anzi tempo addietro avevo anche trovato uno script (complesso, leggeva tutti i fogli di style e analizzava ogni singola riga o qualcosa di simile) per leggere i valori del foglio di style. Il browser non salva queste impostazioni da qualche parte ? Non c'e' modo di raggiungere questi valori ? Del resto, sempre il browser, li ha utilizzati per "disegnare" i vari tag della pagina.

Puoi modificare qualsiasi proprietà impostabile con CSS. La regola è la seguente:

- per modificare una proprietà CSS che ha una sola parola (esempio: display, visibility, overflow), ti basta ottenere un riferimento all'oggetto da modificare, quindi accedere alla proprietà JavaScript style, e infine scrivere la proprietà da modificare, tutta in minuscolo. Un esempio:

Codice:

---

document.getElementById('...').style.display = "none";

---

- se la proprietà CSS da cambiare è composta da più parole separate da un trattino (esempio: background-color, margin-top, padding-bottom), in JavaScript il trattino cade e la successiva lettera deve diventare maiuscola. In codice:

Codice:

---

document.getElementById('...).style.backgroundColor = "#00FF00";

---

Spero di averti risposto... stammi bene...

ti rigrazio , pero' come dici tu funziona se io utilizzo "STYLE" all'interno del TAG dentro la pagina HTML.

Invece io imposto gli stili con foglio esterno.

pagina html

Codice:

---

<DIV ID='pippo' ONCLICK='cambia_dimensioni();'>
...contenuto...
</DIV>

---

foglio di stile

Codice:

---

...
DIV#pippo {width:25px; height:25px;}
...

---

script JS (in file separato)

Codice:

---

function cambia_dimensioni() {
        var elemento = document.degElementById("pippo");
        var larghezza = elemento.style.width;
alert("larghezza ["+larghezza+"]");
        larghezza = larghezza.substr(0,-2);        // tolgo "px"
        larghezza = larghezza - 2;
        elemento.style.width = larghezza + "px";

return false;
}

---

Facendo cosi', l'ALERT mi ritorna un campo VUOTO ("larghezza []");

Citazione:

---

Originalmente inviato da esotica

ti rigrazio , pero' come dici tu funziona se io utilizzo "STYLE" all'interno del TAG dentro la pagina HTML.

Invece io imposto gli stili con foglio esterno.

---

:idea: Allora prova ad importare il foglio di stile con

<STYLE>
@import url("...")
</STYLE>

piuttosto che con il <link rel="stylesheet"...

:!: L'effetto visivo è lo stesso, probabilmente nel primo caso il browser lo conterà come se fosse uno stile specificato in tale tag e lo script funzionerà

:wink:

Citazione:

---

Originalmente inviato da radiostandby

:idea: Allora prova ad importare il foglio di stile con

<STYLE>
@import url("...")
</STYLE>

piuttosto che con il <link rel="stylesheet"...

:!: L'effetto visivo è lo stesso, probabilmente nel primo caso il browser lo conterà come se fosse uno stile specificato in tale tag e lo script funzionerà

:wink:

---

No, non c'entra. La proprietà DOM style di un elemento è riferita allo stile impostato mediante l'attributo style.
Per ottenere le informazioni che ti servono bisogna ricorrere al metodo getComputedStyle.

La proprietà che visualizzi mediante l'alert è inizialmente vuota, per questo quel codice non funziona.

non avevo visto questa risposta ... dopo piu' di un anno...

ora funziona

da quel che ho letto e' read-only la proprietà presa dal CSS, quindi per cambiarla devo metterla nel nodo (come se fosse stata inserita con style='') ? o c'e' altro modo ?


THX