¿Hay alguna manera de detectar si la propiedad "mostrar" css de un elemento se cambia (a si no hay o bloquea o bloquea en línea ...)? si no, ¿algún complemento? GraciasEvento detectar cuando se cambió la propiedad css utilizando Jquery
Respuesta
Sí, puedes. El módulo de eventos DOM L2 define mutation events; uno de ellos - DOMAttrModified es el que necesita. Por supuesto, estos no están ampliamente implementados, pero son compatibles al menos con los navegadores Gecko y Opera.
Probar algo en este sentido:
document.documentElement.addEventListener('DOMAttrModified', function(e){
if (e.attrName === 'style') {
console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
}
}, false);
document.documentElement.style.display = 'block';
También puede intentar utilizar IE's "propertychange" event como un reemplazo para DOMAttrModified
. Debe permitir detectar style
cambios de manera confiable.
No se puede. CSS no admite "eventos". ¿Me atrevo a preguntar para qué lo necesitas? Mira esto post aquí en SO. No puedo pensar en una razón por la cual te gustaría conectar un evento a un cambio de estilo. Supongo que el cambio de estilo se desencadena en otro lugar mediante un javascript. ¿Por qué no agregar lógica extra allí?
Tengo varios eventos que puede activar un cuadro para que aparezca o no. Y tengo otro elemento que depende de la apariencia de esa caja para hacer cosas. Ahora, no quiero repetir el código y conectarme a todos los demás eventos que aparecen en el cuadro, aunque esa es una forma de hacerlo. ¡Solo redundancia! –
¿Es redundante, quizás usar un sistema basado en reglas funcionaría? es decir, ¿alguna estructura similar a JSON que defina lo que debería pasarle a algún control cuando cambie otro control? de esta manera solo necesitarías crear 1 función que use el objeto de regla y quizás el control actual (id) como parámetro? – Colin
¿Por qué está esto downvoted? Definir la clase para el elemento primario de ambos elementos y cambiar el estilo es la única solución adecuada para esto. –
Puede usar la función css
de jQuery para probar las propiedades CSS, p. Ej. if ($('node').css('display') == 'block')
.
Colin tiene razón al decir que no hay un evento explícito que se active cuando se cambia una propiedad CSS específica. Pero es posible que pueda darle la vuelta y desencadenar un evento que configure la pantalla y todo lo demás.
Considere también el uso de la adición de clases CSS para obtener el comportamiento que desea. A menudo puede agregar una clase a un elemento contenedor y usar CSS para afectar a todos los elementos. A menudo pongo una clase en el elemento del cuerpo para indicar que hay una respuesta AJAX pendiente. Entonces puedo usar selectores de CSS para obtener la pantalla que quiero.
No estoy seguro si esto es lo que está buscando.
¿Cómo se hace esto? – crosenblum
Puede usar attrchange jQuery plugin. La función principal del complemento es vincular una función de escucha en el cambio de atributos de elementos HTML.
Ejemplo de código:
$("#myDiv").attrchange({
trackValues: true, // set to true so that the event object is updated with old & new values
callback: function(evnt) {
if(evnt.attributeName == "display") { // which attribute you want to watch for changes
if(evnt.newValue.search(/inline/i) == -1) {
// your code to execute goes here...
}
}
}
});
Tenga en cuenta que para algunos complementos que modificar CSS evnt.attributeName es 'estilo' no 'mostrar'. – jerrygarciuh
Funciona bien, pero esto es más rápido que usar la búsqueda de expresiones regulares y no necesita el primero si (evnt.attributeName ...): if (evnt.newValue.indexOf ('display: inline-block')> -1) { ...; regreso;} –
por propiedades en lo que afectará a la transición css, puede utilizar evento transitionend, ejemplo para z-index:
$(".observed-element").on("webkitTransitionEnd transitionend", function(e) {
console.log("end", e);
alert("z-index changed");
});
$(".changeButton").on("click", function() {
console.log("click");
document.querySelector(".observed-element").style.zIndex = (Math.random() * 1000) | 0;
});
.observed-element {
transition: z-index 1ms;
-webkit-transition: z-index 1ms;
}
div {
width: 100px;
height: 100px;
border: 1px solid;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="changeButton">change z-index</button>
<div class="observed-element"></div>
- 1. Cómo cambiar la propiedad css utilizando jquery con este código
- 2. La posición del cursor cambió el evento
- 3. propiedad idiomática cambió la notificación en scala?
- 4. ¿Cómo obtener el valor de una propiedad CSS utilizando JQuery?
- 5. jQuery + Jeditable: detectar cuando se cambia la selección
- 6. jQuery evento para detectar cuándo cambia la posición del elemento
- 7. Agregar propiedad CSS a jQuery
- 8. Evento desencadenante usando Jquery en cambio CSS?
- 9. jQuery evento cuando se crea el elemento
- 10. elevará automáticamente PropertyChanged cuando una propiedad de objeto interno se cambió
- 11. Cómo eliminar la propiedad CSS en JQuery
- 12. Rx para observar la propiedad cambió con eventos de acción
- 13. Levante el evento "alCambiar" cuando el elemento de entrada cambió por JavaScript desde la ventana emergente
- 14. El control DataGridView se desplaza hacia arriba cuando una propiedad cambió
- 15. JQuery ajax JSONP POST cambió a GET cuando se usa el dominio cruzado
- 16. ¿Hay un evento que se activa cuando se ha establecido un enlace en una propiedad?
- 17. Clasificación de Gridview cuando el texto del encabezado cambió en el evento RowDataBound
- 18. Cómo anular la propiedad css?
- 19. Levante un evento cuando la propiedad se modificó usando la Reflexión
- 20. Eliminar el atributo CSS utilizando Jquery
- 21. ¿Hay algún evento para detectar cuándo se atenúa la pantalla?
- 22. Evento de vinculación de JQuery cuando la imagen de fondo CSS está completamente cargada
- 23. Evento cuando se cambia la tarjeta SIM
- 24. Usando Knockout.js con CouchDB - actualizando cuando se cambió
- 25. Recibir notificación cuando se cambió el valor de RegistryKey
- 26. css puntero-eventos cambio de propiedad y los respectivos eventos de jquery no se activan juntos
- 27. Modifique la definición de regla CSS utilizando jQuery
- 28. Detectar cuando se carga un Applet
- 29. Silverlight TabControl vinculado a ObservableCollection <string> no se actualiza cuando se cambió la colección
- 30. evento Change preferencia con jQuery
Gracias. es compatible con Firefox? –
Sí, IIRC, FF2 y hasta uno actual – kangax
Esto no funcionará si la propiedad efectiva de visualización CSS para un elemento se cambia indirectamente, por ejemplo, al cambiar la clase CSS del elemento. –