CSS opacité cross-navigateur à partir de Javascript

Je veux réduire l'opacité sur un élément quand un utilisateur effectue une action.CSS opacité cross-navigateur à partir de Javascript

Le code actuel que j'ai est:

document.getElementById('MyOpaqueElement').style.opacity = 0.3; 
// There are checks in the real code for NULL, etc.

Cela fonctionne sur Firefox, Safari, etc. IE8 a des idées différentes sur l'opacité. J'ai lu quelques articles mais je n'ai pas encore trouvé de réponse définitive sur la méthode la plus portable pour faire cela de manière cross-browser.

Source

2010-01-20 Martin York

Vous devez prendre en compte différents paramètres et notations spécifiques aux navigateurs.

Voir Quirksmode.org: CSS2 - Opacity

Je suggère d'utiliser un cadre comme JQuery, Prototype, MooTools ou Dojo. Je sais qu'il semble ridicule d'ajouter des dizaines de kilo-octets de code juste pour une certaine opacité au début, mais ça en vaut vraiment la peine. Il fonctionne simplement en un façon pour tous les navigateurs.

Source

2010-01-20 18:03:04

J'utilise déjà JQuery (évidemment pas assez). Je ne vois pas une fonctionnalité d'opacité directe. Puis-je ajouter opacité $ ('XXX'). Css ('opacité', 0.3); ou devrais-je ajouter une autre classe à l'élément (je ne sais pas comment faire cela). –

Il y a '$ (element) .fadeTo (0, 0.5);' Voir http://docs.jquery.com/Effects/fadeTo#speedopacitycallback mais il peut y avoir quelque chose d'encore plus élégant autour. –

Il est possible d'y parvenir via jquery. Vérifiez le poste de débordement de pile suivant:

Jquery opacity change

Source

2010-01-20 18:05:02 deostroll

EDIT- Poster utilise jquery ..

Manière simple:

$(el).css('opacity', '0.3');

(j'ai vérifié les sources jquery, et il gère l'opacité pour compatibilité croisée avec le navigateur, ce qui devrait fonctionner)

Ou pour une solution CSS: c'est une classe, par ex. « Transparent », et ajouter à votre fichier CSS:

.transparent { 
    filter: alpha(opacity=30); /* for IE */ 
    -khtml-opacity: 0.3;  /* khtml, old safari */ 
    -moz-opacity: 0.3;  /* old mozilla, netscape */ 
    opacity: 0.3;   /* good browsers: FF, safari, opera */ 
}

Source

2010-01-20 18:06:06 adamJLev

L'équivalent devrait être document.getElementById('MyOpaqueElement').style.filter = 'alpha(opacity=30)';

Par ailleurs, même si vous n'utilisez pas une bibliothèque comme YUI ou JQuery, vous pouvez les télécharger et rechercher leurs sources pour le mot

opacité

Source

2010-01-20 18:07:15 Gyuri

CSS opacité cross-navigateur à partir de Javascript

Répondre

Questions connexes