[javascript] DOM associazione css al documento

DNAx86 · 07-08-2010, 18:37

sto studiando javascript e da quel che dice il mio libro
javascript non permette di associare fogli di stile css creati con javascript a documenti html, questo in DOM Level 2.

In DOM Level 3 è cambiato qualcosa?

Se no, allora l'unico modo per aggiungere regole css è l'impostazione dell'attributo style degli elementi html ?
Ma non dovrebbe esserci la separazione tra html/css ??
CSS è stato creto per separare il contenuto dalla presentazione, no?
Allora perchè hanno fatto così il DOM ?

fero86 · 07-08-2010, 20:31

non ho provato ma, dal momento che é possibile* associare un ID al tag <link> usato tra l'altro per legare i fogli stile ai documenti HTML, quasi sicuramente é possibile cambiare dinamicamente un foglio.
purtroppo non ti so dire quale livello della specifica DOM permetta questa cosa ma la questione mi interessa e quindi mi sa che ci butto un occhio.

*controllato ora sulle specifiche di HTML 4.01

fero86 · 07-08-2010, 20:41

ho provato e funziona egregiamente in IE8, FF e Chrome.

codice della pagina:

Codice:

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<link id="style" rel="stylesheet" type="text/css" href="style1.css"/>
</head>
<body>
<p class="test">TEXT</p>
<script type="text/javascript">
// <![CDATA[
setTimeout(function() {
	document.getElementById("style").href = "style2.css";
}, 2000);
// ]]>
</script>
</body>
</html>

file style1.css:

Codice:

.test {
	background-color: yellow;
}

file style2.css:

Codice:

.test {
	background-color: green;
}

DNAx86 · 08-08-2010, 10:26

vi ringrazio,

ma generalmente che approccio si usa con Javascript nel creare "istruzioni" css ?

Si creano tag e gli si imposta l'attributo style
oppure si crea il foglio di stile e lo si associa (topic di questo thread) ?
Da quel che ho capito si preferisce la prima, no?

fero86 · 08-08-2010, 13:13

Quote:

Originariamente inviato da DNAx86

vi ringrazio,

a chi?

Quote:

ma generalmente che approccio si usa con Javascript nel creare "istruzioni" css ?

Si creano tag e gli si imposta l'attributo style
oppure si crea il foglio di stile e lo si associa (topic di questo thread) ?
Da quel che ho capito si preferisce la prima, no?

le due strategie hanno chiaramente effetti diversi: impostare l'attributo style di un certo tag modifica lo stile solo di quel tag, mentre cambiare il foglio di stile associato alla pagina cambia lo stile di tutti gli elementi influenzati dal foglio che cambi. dipende da cosa vuoi fare insomma, cioé dipende se vuoi modificare un particolare elemento oppure magari tutta la pagina.

MEMon · 08-08-2010, 17:00

Quote:

Originariamente inviato da DNAx86

vi ringrazio,

ma generalmente che approccio si usa con Javascript nel creare "istruzioni" css ?

Si creano tag e gli si imposta l'attributo style
oppure si crea il foglio di stile e lo si associa (topic di questo thread) ?
Da quel che ho capito si preferisce la prima, no?

Si, solitamente javascript si usa per la prima, ossia per cambiare dinamicamente l'aspetto di "qualcosa".

Per la seconda ipotesi comunque raramente si carica un file css già pronto, in quanto questo vorrebbe dire che poi si utilizzerà quello stile, staticamente, per tutta la navigazione; per ottenere quel risultato non si usa javascript ma un linguaggio lato server.

Javascript si usa per cambiarlo dinamicamente, infatti permette di maneggiare(creare, cambiare e cancellare) un foglio di stile, accedendo agli oggetti styleSheet:

Codice:

var myStyleSheet=document.styleSheets[0];
myStyleSheet.insertRule(".test{ background-color: yellow; }", 0); // FF
myStyleSheet.addRule(".test{ background-color: yellow; }", 0); // IE

Considera comunque che questi metodi sono usati quasi esclusivamente quando si vuole cambiare dinamicamente l'aspetto di molti elementi(che hanno già un loro aspetto), questo perchè javascript comincia a "lavorare" a caricamento concluso(o almeno dopo che lo script è stato caricato).

07-08-2010, 18:37	#1
DNAx86 Member Iscritto dal: Dec 2007 Città: Friuli Messaggi: 154	[javascript] DOM associazione css al documento sto studiando javascript e da quel che dice il mio libro javascript non permette di associare fogli di stile css creati con javascript a documenti html, questo in DOM Level 2. In DOM Level 3 è cambiato qualcosa? Se no, allora l'unico modo per aggiungere regole css è l'impostazione dell'attributo style degli elementi html ? Ma non dovrebbe esserci la separazione tra html/css ?? CSS è stato creto per separare il contenuto dalla presentazione, no? Allora perchè hanno fatto così il DOM ? __________________  iPhone4, MacBook

07-08-2010, 20:31	#2
fero86 Senior Member Iscritto dal: Oct 2006 Città: Roma Messaggi: 1383	non ho provato ma, dal momento che é possibile* associare un ID al tag <link> usato tra l'altro per legare i fogli stile ai documenti HTML, quasi sicuramente é possibile cambiare dinamicamente un foglio. purtroppo non ti so dire quale livello della specifica DOM permetta questa cosa ma la questione mi interessa e quindi mi sa che ci butto un occhio. *controllato ora sulle specifiche di HTML 4.01 __________________ 3D Volley Demo (Facebook) \| Reversi (Facebook) \| Blockout (Facebook) \| Puzzle15 (Facebook)

08-08-2010, 10:26	#4
DNAx86 Member Iscritto dal: Dec 2007 Città: Friuli Messaggi: 154	vi ringrazio, ma generalmente che approccio si usa con Javascript nel creare "istruzioni" css ? Si creano tag e gli si imposta l'attributo style oppure si crea il foglio di stile e lo si associa (topic di questo thread) ? Da quel che ho capito si preferisce la prima, no? __________________  iPhone4, MacBook

Strumenti
Mostra una versione stampabile Invia questa pagina per email