[CSS/JS] Van CSS van JS

[Bender]

Ik heb dit in mijn css file staan:

code:

img.nav         { filter: alpha(opacity=50); }

Dit is uiteraard niet valid, dit wil ik daarom via JS doen.

Maar ik weet niet precies hoe, iets in de richting van dit:

code:

function setfade() {
    img.nav.style.filter ='alpha(opacity=50)';
}

Dit werkt dus niet, maar weet niet hoe het wel moet eigenlijk.
Het gaat ook om meerdere images met de class 'nav', en het is dan niet de bedoeling om alle images een andere id te geven

[crisp]

En je denkt dat door met JS de style toe te wijzen het ineens wel valide is? Het is en blijft natuurlijk een IE-extensie, de manier van toekennen veranderd daar niets aan. Ik zou het gewoon in je CSS laten staan, user agents die de filter property niet kennen zullen 'm gewoon negeren (mozilla kent trouwens de property -moz-opacity )

Kortom: bespaar je de moeite, je voegt met dit soort constructies alleen maar extra voorwaarden toe waaraan de client moet voldoen (JS support).

[Bender]

crisp schreef op 29 September 2003 @ 11:34:
En je denkt dat door met JS de style toe te wijzen het ineens wel valide is? Het is en blijft natuurlijk een IE-extensie, de manier van toekennen veranderd daar niets aan. Ik zou het gewoon in je CSS laten staan, user agents die de filter property niet kennen zullen 'm gewoon negeren (mozilla kent trouwens de property -moz-opacity )

Kortom: bespaar je de moeite, je voegt met dit soort constructies alleen maar extra voorwaarden toe waaraan de client moet voldoen (JS support).

Ik zeg niet dat hij wel valide word
De functie gaat alleen gewoon niks doen als de browser geen MSIE is

En ik had al gevonden dat die functie in Mozilla en NS6 werkt, alleen nog niet toegepast, 1 voor 1.

En ik hou wel van lastioge constructies

[crisp]

ok, css rules toevoegen is inderdaad mogelijk in IE; een paar tips:

document.styleSheets = collectie van je stylesheets
elk stylesheet object kent repectievelijk de rules collectie of de cssRules collectie (IE / Mozilla)
met addRule of insertRule kan je een rule toevoegen; hier hoort een index bij die nog niet in gebruik mag zijn.

Ik heb helaas geen compleet voorbeeld voor je, maar hiermee moet je er wel uitkomen lijkt me. Ik blijf er echter bij dat het onnodig moeilijk doen is; als je volledig W3C compliant wilt werken moet je gewoon geen browserspecifieke functies inbouwen...

[Clay]

img.nav in je css is een <img> met classe nav, als je dan bv alle img's met die classe van die filter wil voorzien zul je iets moeten doen ala:

JavaScript:

var img, imgs = document.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++) {
   img = imgs[i];
   if(img.className.indexOf('nav') > -1) { // kan meerdere classes hebben
      // hier img.style aanpassen
   }
}

_{niet getest, maar het principe moet werken}

[ Voor 7% gewijzigd door Clay op 29-09-2003 11:52 ]

[crisp]

Clay schreef op 29 september 2003 @ 11:48:
img.nav in je css is een <img> met classe nav, als je dan bv alle img's met die classe van die filter wil voorzien zul je iets moeten doen ala:

[...]
_{niet getest, maar het principe moet werken}

Dat is de andere kant op, en kan natuurlijk ook
Persoonlijk vind ik een rule toevoegen aan de class wel wat eleganter, maar dat heeft weer als grote nadeel dat het alleen in IE en Mozilla kan...

[Bender]

Volgens mji had ik moeten vertellen dat ik geen held ben in JS

@crisp
Het gaat niet alleen om valid, maar vooral omdat ik het wat fijner vind om te werken,
aangeziene r al een functie in mijn JS file staat met fade.

@Clay
Ik weet niet wat ik bij "hier img.style aanpassen" niet moet zetten aangezien ik niet weet hoe dat spul eruit moet komen te zien.

[crisp]

Triloxigen schreef op 29 September 2003 @ 12:02:
Volgens mji had ik moeten vertellen dat ik geen held ben in JS

wat niet is kan nog komen natuurlijk

[...]
Ik weet niet wat ik bij "hier img.style aanpassen" niet moet zetten aangezien ik niet weet hoe dat spul eruit moet komen te zien.

JavaScript:

img.style.filter ='alpha(opacity=50)';

[Bender]

crisp schreef op 29 September 2003 @ 12:07:
[...]

wat niet is kan nog komen natuurlijk

Dat was wel ooit de bedoeling

crisp schreef op 29 September 2003 @ 12:07:
[...]

JavaScript:

img.style.filter ='alpha(opacity=50)';

hmm,
ik had img.nav.style.filter ='alpha(opacity=50)'; geprobeerd
Het werkt perfect,
many thanks