Keskustelu: Nettisivujen teko: Javascriptillä dynaamista CSS muokkausta?

eli nyt olisi tälläinen ongelma, että täytyisi saada CSS tyylitiedostoa muokattua dunaamisesti esimerkiksi onMouseOver funktion kutsumana. Pitääkö mun generoida tyylitiedosto kokonaan Javascriptillä vai pystynkö jotenkin lisäämään jonkun CSS määritteen perästäpäin?

Esim.
Täytyisi saadaa tietylle div laatikolle mustat kehykset koska hiiri liikkui paikkaan a?

Ongelma on se, että käsittääkseni tyylitiedostoja ei voi olla kuin vain yksi ja sekin pitää tehdä head lohkossa, vai? jonka takia on en voi vaan kirjoittaa: document.write("#lohkoJeeJee{border: 2px solid black"};

En tiedä tuosta muuttamisesta (Enkä JS:stä sitten mitään (?)), mutta kyllä minulla toimii vaikka olisi kuinkamonta tyylitiedostoa.
Kyllähän voit myös laittaa sen muualle kuin HEAD tagien sisään, mutta kaikki selaimet eivät välttämättä ymmärrä. Minulla toimii (IE7) kyllä sekin jotenkin, mutta ei ole sitten validia.

JS:llä vaikka näin:

var d = document.getElementById("divin_id");
d.style.borderColor = "black";
d.style.borderStyle = "solid";
d.style.borderWidth = "3px";

Helpompaa olisi käyttää CSS:n luokkia ja jotain hyvää JS-kirjastoa. Esimerkiksi Prototype-kirjaston ja CSS-luokan kanssa äskeinen onnistuisi näin:

/* JS, Prototype */
$("divin_id").addClassName('musta_laatikko');

/* CSS */
.musta_laatikko {
  border: 1px solid black;
}

Alright pojat, kiitos selkeistä vastauksista!
toimii hienosti!

Nyt ku pääsin käyttää tätä hyväksi, niin tuli yks toinenkin kysymys aiheeseen liittyen. Miten viittaan esimerkiksi background-imageen, kun ei näytä toimivan samalla logiikalla(kokeilin tätä):

d.style.background-image = "url("kuvat/kehykset.png")";

Mutta tulee virheilmoitus. Pitäisikö toimia, vai millä tavalla voidaan viitata johonkin muuhunkin kuin pelkkään borderiin?

lainaus:

Miten viittaan esimerkiksi background-imageen

Jos oikein muistan niin näin:

document.getElementById('divi').style.backgroundImage = 'url("kuvat/kehykset.png")';

no ihan hyvin näytät muistavan, toimii! Kiitti!

Mikä on logiikka, väliviivat pois ja ne korvataan siten, että laitetaan iso alkukirjain?

Entäs "'"' näissä merkeissä, jos tulee kahdet peräkkäin, niin ulommat muutetaan täksi ' merkiksi vai?

Tekstin voi merkitä JS:ssä ":lla tai ':lla. Jos "tekstin" sisään tulee lainausmerkki, sen eteen pitää lisätä kenoviiva: "lainaus\"merkki\"".

Olisiko liikaa pyydetty, että tutustuisit JS-oppaaseen?

mut vähän hämärästi on tässä esimerkiksissä: 'url("kuvat/kehykset.png")';
toisin kuin voisi olettaan, esimerkiksi näin "url(\"kuvat/kehykset.png\")";

Muistaakseni voi käyttää stringin aloittamiseen ja lopettamiseen kumpia vain quoteja, kunhan alotat ja lopetat sen samalla (single tai double quotella). Eli tuosa sun aikaisemmassa esimerkissä se osuus, jonka annat kuvan osoitteena päättyy tähän: "url(" , tämän jälkeen se javascript ei tiedä mitä tuo loppu osa on. Eli jos käytät samoja quote merkkejä aloitus ja lopetus merkin sisällä sun pitää eskapoida ne.

Nämä kaikki pitäisi toimia, tai vika on jossain muualla:
str = "test 'quoted'";
str = 'test "quoted"';
str = 'test \'quoted\'';
str = "test \"quoted\"";

Lukaiseppas vaikka tämä läpi: http://jennifermadden.com/javascript/escapeCharacter.html .

Edit:
Kyllä tämänki pitäs toimia kaiken järjen mukaan: "url(\"kuvat/kehykset.png\")";

selkee, kiitokset!