PDA

View Full Version : [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:

<?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:

.test {
background-color: yellow;
}



file style2.css:

.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
vi ringrazio, a chi? :D



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

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).