[js][css] stylesheet aanpassen ?

[r0bert]

Ik was benieuwd of het mogelijk was om via JS een bepaald gedeelte van een stylesheet aan te passen door er bijvoorbeeld een filter aan toe te voegen.

Vb:

code:

<style type="css/text">
.menu {
    font-family: Verdana;
    font-size: 10pt;
    color: black;
}
</style>

en dan vervolgens een rule/filter aan .menu toevoegen dmv JS/dHTML. Mogelijk of onmogelijk

Ik weet dat ik ook 2 verschillende stylesheets kan maken en dan aan de hand van de browser een stylesheet eraan kan plakken, maar was benieuwd of het bovenstaande ook kon.

En nog even een vraagje, als dat in ieder geval niet te verwarrend wordt . Hoe kun je meerdere styles aan iets toevoegen. Dus bijvoorbeeld een style met het lettertype genaamd 'defaultFont' en eentje voor de positie 'defaultPositie'. Ik gok iets van class="defaultFont, defaultPositie" maar dat werkte niet.

[Hangloozz]

Op donderdag 21 maart 2002 14:27 schreef r0bert het volgende:

en dan vervolgens een rule/filter aan .menu toevoegen dmv JS/dHTML. Mogelijk of onmogelijk

Je kunt toch een js-functie maken die de style wijzigt en die je aanroept op het moment dat...?

Op donderdag 21 maart 2002 14:27 schreef r0bert het volgende:
En nog even een vraagje, als dat in ieder geval niet te verwarrend wordt . Hoe kun je meerdere styles aan iets toevoegen. Dus bijvoorbeeld een style met het lettertype genaamd 'defaultFont' en eentje voor de positie 'defaultPositie'. Ik gok iets van class="defaultFont, defaultPositie" maar dat werkte niet.

ehh, ook functie-tje maken

[r0bert]

[..]
Je kunt toch een js-functie maken die de style wijzigt en die je aanroept op het moment dat...?

Ik snap niet precies wat je bedoeld. Bedoel je iets van:

object.style.filter = "progid:DXimage etc...." ?

Want dat is dus niet wat ik bedoel. Ik bedoel om de styles(heet) zelf echt aan te passen.

[..]

ehh, ook functie-tje maken

2 styles declareren in 1 styletag. Weet niet wat ik dan met een functie-tje moet

[Willem]

Nu ben ik niet zo'n JS sjako, maar als je nu een script maakt die een inline-style overruled (met document.write), en daarna de pagina refreshed, ben je toch klaar Correct me if I'm wrong...

[Verwijderd]

Op donderdag 21 maart 2002 14:27 schreef r0bert het volgende:
Ik weet dat ik ook 2 verschillende stylesheets kan maken en dan aan de hand van de browser een stylesheet eraan kan plakken, maar was benieuwd of het bovenstaande ook kon.

Moet volgens mij wel mogelijk zijn...ik weet alleen ff zo gauw niet hoe

En nog even een vraagje, als dat in ieder geval niet te verwarrend wordt . Hoe kun je meerdere styles aan iets toevoegen. Dus bijvoorbeeld een style met het lettertype genaamd 'defaultFont' en eentje voor de positie 'defaultPositie'. Ik gok iets van class="defaultFont, defaultPositie" maar dat werkte niet.

Zoals jij het wil kan het niet. Geneste containers, misschien?

code:

<div class="leftAlign">
    <span class="times">Lorem dolor sit ameth</span>
</div>

<div class="leftAlign">
    <span class="arial">Lorem dolor sit ameth</span>
</div>

<div class="rightAlign">
    <span class="times">Lorem dolor sit ameth</span>
</div>

<div class="rightAlign">
    <span class="arial">Lorem dolor sit ameth</span>
</div>

[r0bert]

Op donderdag 21 maart 2002 15:19 schreef willem169 het volgende:
Nu ben ik niet zo'n JS sjako, maar als je nu een script maakt die een inline-style overruled (met document.write), en daarna de pagina refreshed, ben je toch klaar Correct me if I'm wrong...

overrulen kan wel, maar dat is niet wat ik bedoel..
en een pagina refreshen heeft zowiezo geen zin, want dan worden alle waardes opnieuw ingeladen (JS veranderingen worden niet onthouden/meegenomen)

[Dennis]

Op donderdag 21 maart 2002 15:20 schreef Blues het volgende:
Zoals jij het wil kan het niet. Geneste containers, misschien?

blablabla

code:

<p class="classnummertjeéén classnummertjetwee"></p>

[Verwijderd]

Op donderdag 21 maart 2002 16:00 schreef ddc het volgende:

code:

<p class="classnummertjeéén classnummertjetwee"></p>

F***in A! I stand corrected!

[Dennis]

Op donderdag 21 maart 2002 16:34 schreef Blues het volgende:
F***in A! I stand corrected!

Je ne comprende pas ?

Bedoel je dat ik gelijk heb?
Btw, werkt pas vanaf IE6 ofzo en in Mozilla ook , das wel het grootste nadeel.

[Verwijderd]

Op donderdag 21 maart 2002 18:08 schreef ddc het volgende:

Je ne comprende pas ?

Bedoel je dat ik gelijk heb?
Btw, werkt pas vanaf IE6 ofzo en in Mozilla ook , das wel het grootste nadeel.

Ik bedoel inderdaad dat je gelijk hebt:
Fuckin' A = wow/te gek
I stand corrected = Ik sta hier gecorrigeerd te zijn


Het werkt volgens mij ook (deels) in IE5.

[disjfa]

maar dat kun je toch ook gewoon met jscipt....

<div id="bla" class="verdana">blablabal</div>

en dan ergens:

bla.style.filter='shadow'

onder een button oid
alleen idd ie6 bijna only

[r0bert]

Hmm zal nog een keer uitleggen dmv een voorbeeldje:

code:

<style type="css/text">
span.menu {
    font-family: Verdana;
    font-size: 10pt;
    color: black;
}
</style>

<body>

<span class="menu" id="spanId1"> Tekst 1 </span>
<span class="menu" id="spanId2"> Tekst 2 </span>
<span class="menu" id="spanId3"> Tekst 3 </span>
<span class="menu" id="spanId4"> Tekst 4 </span>

</body>

als je nu bijvoorbeeld de tekst 1, 2, 3 & 4 bold wilt maken kun je

code:

document.all['spanId1'].style.fontWeight = 'bold';
document.all['spanId2'].style.fontWeight = 'bold';
document.all['spanId3'].style.fontWeight = 'bold';
document.all['spanId4'].style.fontWeight = 'bold';

Maar het zou veel makkelijker zijn om de class even aan te passen dmv

code:

document.styleSheets[0].elements['menu'].fontWeight = 'bold';

Snappie

[Dennis]

Op vrijdag 22 maart 2002 13:09 schreef r0bert het volgende:
Snappie

Ik begreep het al, maar volgens mij is dit NIET mogelijk.

[disjfa]

document.style.class.menu.fontweight = bolder;

mischien

edit.
sja, ff js met css doorelkaar gehaald

[r0bert]

zowiezo geen '-' => fontWeight ipv font-weightmaar
maar dat werkt ook niet

[crisp]

interessant.

Oftwel:

code:

document.styleSheets[0].rules[0].style.fontWeight='bold';

[r0bert]

werkt (nog) niet, maar in ieder geval een interressante pagina, ben nog wel even bezig om die source te bestuderen, damn..

[crisp]

Dit werkt hier prima hoor (IE5.5):

code:

<html>
<head>
<script language="JavaScript">

function doe() {

  document.styleSheets[0].rules[0].style.fontWeight='bold';

}

</script>

<style type="text/css">
.menu {
    font-family: Verdana;
    font-size: 10pt;
    color: black;
}
</style>
</head>
<body onClick="doe()">
<span class="menu" id="spanId1"> Tekst 1 </span>
<span class="menu" id="spanId2"> Tekst 2 </span>
<span class="menu" id="spanId3"> Tekst 3 </span>
<span class="menu" id="spanId4"> Tekst 4 </span>
</body>
</html>

Klik, en alles wordt bold

[r0bert]

Inderdaad! fout zat in een ander gedeelte van de pagina

Superz Crisp! dikke euhh pluim (toch )

en de rest ook bedankt