javascript toglie priorità ai css

**snakessj** · 07-04-2009, 16:29

Salve, non sapevo in che sezione scrivere, spero sia quella giusta! Il problema è il seguente: se modifico una proprietà css da javascript (es. margin = '0'

i css non avranno più effetto su quella proprietà. Mi spiego meglio, se dopo aver modificato una proprietà qualsiasi tramite javascript mi aspetterei di vedere in azione un "hover" tramite css che la va a modificare...questo non avviene! Purtroppo però mi rendo conto che l'unico browser che funziona come si deve è Firefox: sia Chrome, Opera, Safari e IE si dimenticano delle regole impostate nei css! Possibile che sia la "normalità"? O.o

EDIT:
lampo di genio: ho messo !important e tutto funziona come dovrebbe!

spero cmq di essere di aiuto a qualcuno che ha avuto il mio stesso problema!

**artorius** · 07-04-2009, 17:08

Non prenderla a male, ma non hai molto capito come funziona il CSS.

Le regole di CSS hanno un peso, il quale è definito dal numero e dal tipo di elementi che la regola definisce (per tipo di elementi intendo se la regola si applica su elementi HTML, class o id).

Le regole hanno un peso maggiore maggiore è l'unicità del tipo di elemento, cioè la classe avrà un peso maggiore dell'elemento HTML generico, dato che ci sono meno elementi con class, e quindi class è una specializzazione dell'elemento ed ha più valore. Allo stesso modo l'ID è una specializzazione ancora più importante di class ed ha quindi più peso.

Ma l'attributo style sull'elemento è la specializzazione più importante di tutte, perché la regola li definita è UNICA ed è, quindi, la più pesante.

Proprio per questo sei sempre sicuro che alterando la proprietà style tramite JS l'elemento avrà quell'aspetto e basta.

Se vuoi ritornare all'aspetto originale hai due opzioni: o ridefinisci con JS la proprietà style in modo che sia come quella originale o, più semplicemente, chiami removeAttribute('style') sull'elemento che cancella tutte le modifiche JS effettuate.

**snakessj** · 08-04-2009, 17:35

Più che altro queste cose non le ho mai studiate da nessuna parte, ma si impara col tempo e l'esperienza no? Grazie della delucidazione?^^ M'informerò meglio!
In ogni caso bisogna ammettere che Firefox si comporta come mi aspettavo e che peso maggiore o peso minore che sia, nel momento in cui agisce "hover" se non c'è un "hover" con peso maggiore, il primo dovrebbe avere il suo normale effetto...a rigor della mia logica e in quella di Gecko...

**artorius** · 09-04-2009, 09:47

scusa, ma non ho capito bene il senso della tua frase...

Comunque, le specifiche CSS sulle regole di pari peso dicono chiaramente, che ha effetto l'ultima dichiarata.

tipo:

codice:

p.MyClass1{
   color: blue;
}

p.MyClass2{
   color: red;
}

nell'elemento

<p class="MyClass1 MyClass2">
Blablabla
</p>

il testo sarà rosso.

**snakessj** · 09-04-2009, 18:50

bon, ma quello è ovvio! ti allego un esempio di quello che succede (ho commentato !important)...però al momento non va nemmeno su Firefox, prima però si...bo!...purtroppo non riesco più a ricreare le condizioni iniziali

o forse era Firefox che non mi aggiornava la cache. Fatto sta che nella mia testa è un comportamento un po' anomalo; in ogni caso se tutti i browser si comportano allo stesso modo taccio e uso "!important" per far funzionare il tutto come garba a me!

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS e Javascript</title>
    <style type="text/css">
	#test{
		margin:100px auto;
		background:#00CC99;
		text-align:center;
		width:50%;
	}
	#test:hover{
		background:#FF9900 /*!important*/;
	}
    </style>
</head>

<body>

	<div id="test"><span>i CSS hanno</span> la priorità</div>
    
	<script type="text/javascript">
	function t(){
		test = document.getElementById('test');
		test.style.background = '#9999FF';
		test.firstChild.innerHTML = 'JAVASCRIPT ha';
	}
	setTimeout("t()",3000);
    </script>
    
</body>
</html>

**artorius** · 09-04-2009, 20:45

err, ma esattamente cos'è che vorresti ottenere?

**snakessj** · 09-04-2009, 20:57

che l'hover funzioni nonostante javascript modifichi la proprietà! ma hai provato lo script? più palese di quello: prima che javascript agisca prova a passare col mouse sul rettangolo, vedrai che cambia colore, dopo (3 secondi di wait) rimarrà fisso! se togli il commento nei css invece funzionerà anche dopo l'azione del javascript!

**artorius** · 10-04-2009, 09:21

Beh, io di solito l'hover lo gestisco con il JS non con i CSS.

Ma con che browser lo stai testando? su IE7 funziona? perché su IE6 penso proprio di no, dato che non gestisce !important.

**snakessj** · 11-04-2009, 19:23

testo sempre tutto da IE6 in su, tranquillo

qualche tempo fa anche IE5.5, ma direi che è ora di dimenticarcene! (finalmente

) Ah, a quanto pare il mio IE6 vede !important...forse perché è la versione standalone? a dire il vero mi sembrava che il 6 supportasse l'!important...non ricordo bene però

**artorius** · 11-04-2009, 22:27

mmm il fatto è che per gestire il min/max-height in IE6 si usava:

codice:

  min-height:200px;
  height:auto !important;
  height:200px;

Funzionava perché IE6 non leggeva l'height: auto; se immesso con !important e usava height: 200px;

Discussione: javascript toglie priorità ai css

Strumenti discussione

Ricerca discussione

Visualizza

javascript toglie priorità ai css

Permessi di invio