[SOLUCIONADO] Pasar una imagen a escala de grises

[jagp1119]

Hola quiero pasar a escala de grises una imagen cargada en html y pues si pongo esto funciona

Código HTML:

<div id="eventos">
                
                <a href="#seg_pag" ><img src="img/evento.jpg" style=" position:absolute; width: 100%; height: 100%;" id="matrix" onclick=" clicenimagen=1, guardar(), imagen_evento(), ir_a('pagina2')"></a>
            
            </div>
 

Código CSS:

#eventos{
    
    position:absolute;
    top:8%;
    left:10%;
    width: 70%;
    height: 80%;
    border: 1px solid white;
   -webkit-filter: grayscale(100%); 
   
}
 

pero lo que quiero es cambiarlo con javascript pero al poner esto

Código Javascript:

if (objeto == 3){document.getElementById('eventos').style.filter='grayscale(100%)';}
 

no me lo reconoce porque segun veo tiene que tener compatibilidad con webkit si nó no funciona, que puedo hacer?, se que con canvas se puede cambiar la propiedad de color de las imágenes, pero quisiera saber si hay otra forma mas sencilla.

[Alexis88]

Hazlo así:

Código Javascript:

document.getElementById('eventos').style.webkitFilter = 'grayscale(100%)';
 

Esa forma de escribir las propiedades se llama camelCase y se emplea para casos de propiedades que, en escritura CSS, tienen un guión en medio. De cualquier forma, debiste publicar este tema en el foro de JavaScript.

Saludos

[jagp1119]

Perfecto funciona como quiero muchas gracias :).