Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

119
Vistas
DOM changing syntax of CSS property set

Setting CSS property in JS with particular syntax, however is overwritten by the preferred syntax of the browser. How can I avoid this?

Poor practice, however I later .split() the property to fetch a single number in the property string, which causes issues when the syntax is changed after I set it.

For example:

Setting property:

el.style.maskImage = "gradient(linear, left top, right top, 
    color-stop(1,  rgba(0,0,0,1)),
    color-stop(1,  rgba(0,0,0,1))"

Browser changes this to:

mask-image: linear-gradient(to right, rgb(0, 0, 0) 100%, rgb(0, 0, 0) 100%);

Which causes issues when I try and split to find an int in property string:

el.style.maskImage.split("color-stop")[1].split("(")[1].split(",")[0]

This is avoided partially in webkit browsers by not using whole values (color-stop(.99, rgba(0,0,0,1))), however it still pops up often, specifically in Firefox.

It is too late to convert the codebase to this preferred syntax, so is there any way of forcing the browser to use this exact CSS and not switch?

This may be a duplicate as I am unsure of the phrasing of this question. Vanilla Javascript

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda