javascript - eliminar - IE8 no refresca la clase después del cambio del valor del atributo
setattribute javascript (2)
Contexto: tengo una página HTML que hace uso de atributos de datos HTML5 . Algunos de mis estilos CSS usan selectores de atributos para elementos de estilo en función del valor de esos atributos personalizados.
Problema: cuando actualizo el valor de un atributo de datos usando JavaScript, Chrome responde correctamente al rediseñar los elementos afectados, pero IE8 (que estoy obligado a admitir) no ... no inmediatamente. La única forma de que IE8 actualice el estilo es mediante el uso directo del estilo CSS de alguna otra manera (como eliminar o modificar el atributo de class ).
Ejemplo:
<html>
<head>
<style type="text/css">
.Test[data-foo="bar"]{ background-color: Green; }
.Test[data-foo="baz"]{ background-color: Red; }
</style>
<script src="scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
function change(div) { $(div).attr("data-foo", "baz"); }
function toggleTest() { $("DIV").toggleClass("Test"); }
</script>
</head>
<body>
<div data-foo="bar" onclick="change(this);" class="Test">Testing</div>
<div data-foo="bar" onclick="change(this);" class="Test">Testing</div>
<input type="button" onclick="toggleTest()" value="Toggle Class" />
</body>
</html>
En Chrome, puede hacer clic en las barras Prueba1 y Prueba2 y cambian a rojo instantáneamente. En IE8, debe hacer clic en la barra, luego hacer clic en el botón dos veces (una para eliminar la clase, nuevamente para restaurarla).
Pregunta: ¿Cuál es la solución? Obviamente, he identificado uno (agregar / eliminar la clase), pero es feo. ¿Existe una forma elegante y discreta de obligar a IE8 a reevaluar el estilo de un elemento sin perder el tiempo con los atributos del elemento?
Si bien muchos atributos, cuando se cambian, causan un reflujo, este no parece ser el caso con los atributos data-* en Internet Explorer 8. Cambiarlos no dará como resultado que el elemento se vuelva a dibujar de inmediato, tendrá que activar su reflujo manualmente.
el.setAttribute("data-foo", "foo");
el.style.opacity = 1;
En el ejemplo anterior, activé el reflujo estableciendo la opacidad del elemento en 1. También puede establecer la propiedad del zoom en 1, o incluso establecer el className del elemento en sí mismo:
el.className = el.className;
Cualquiera de estos debe aplicar inmediatamente los nuevos estilos basados en el selector de atributos. La buena noticia es que esto fue en IE8, un navegador que precedió el amplio uso de los atributos de datos, así que aunque tenemos que sufrir un poco allí, no tenemos que hacerlo con IE9 o IE10; ambas versiones funcionarán sin problemas. cualquier atención especial a los problemas de reflujo.
no use onclick si tiene las posibilidades de jQuery escribirlo así
jQuery(''input[type="button"]'').click(function() {
jQuery(''div'').toggleClass("Test");
});
jQuery(''div'').click(function() {
jQuery(''div'').attr("data-foo", "baz");
});
en IE siempre debes verificar la consola JavaScript-error.