eliminar - removeattribute javascript
jquery-¿Cómo se determina si un div cambia su altura o cualquier atributo css? (4)
Otro simple ejemplo.
Para esta muestra, podemos usar 100x100 DIV-box:
<div id="box" style="width: 100px; height: 100px; border: solid 1px red;">
Red box contents here...
</div>
Y un pequeño truco jQuery:
<script type="text/javascript">
jQuery("#box").bind("resize", function() {
alert("Box was resized from 100x100 to 200x200");
});
jQuery("#box").width(200).height(200).trigger("resize");
</script>
Pasos:
- Creamos el elemento de bloque DIV para cambiar el tamaño de las operaciones
- Agregue código JavaScript simple con:
- jQuery bind
- El ajustador de jQuery con acción de disparo "redimensionar" - el disparador es lo más importante en mi ejemplo
- Después de cambiar el tamaño, puede consultar la información de alerta de un navegador
Eso es todo. ;-)
Quiero saber cómo desencadenar un evento cuando un div cambia su altura o cualquier atributo css.
Tengo un div con id = mainContent . Quiero que jquery active automáticamente un evento cuando cambie su altura. Hice algo como esto:
$("#mainContent").change(''height'', function() {
$("#separator").css(''height'', $("#mainContent").height());
});
Sé que está mal.
Aquí está mi código completo (pegué todo porque no puedo entrar en jsfiddle por alguna razón que no sé):
<html>
<head>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#separator {
border-right: 1px solid black;
}
</style>
<script type="text/javascript" src="jquery1.6.4min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$("#separator").css(''height'', $("body").height());
});
$(function() {
$("#btnSample1").click(function() {
$("#mainContent").css(''height'', ''400px'');
$("#mainContent").css(''width'', ''600px'');
$("#mainContent").css(''background-color'', ''#F0F0F0'');
});
$("#btnSample2").click(function() {
$("#mainContent").css(''height'', ''1600px'');
$("#mainContent").css(''width'', ''700px'');
$("#mainContent").css(''background-color'', ''#F0F0F0'');
});
$("#mainContent").change(''height'', function() {
$("#separator").css(''height'', $("#mainContent").height());
});
});
</script>
</head>
<body>
<table style="width: 100%;">
<tr>
<td valign="top" style="width: 19%;">
<table id="mainMenu">
<tr><td><input id="btnSample1" type="button" value="Sample 1" /></td></tr>
<tr><td><input id="btnSample2" type="button" value="Sample 2" /></td></tr>
</table>
</td>
<td valign="top" style="width: 1%;" >
<div id="separator"></div>
</td>
<td valign="top" style="width: 80%;">
<div id="mainContent"></div>
</td>
</tr>
</table>
</body>
</html>
Estoy intentando ajustar la altura de div id = separator función de la altura de mainContent siempre que mainContent la altura de mainContent .
PD: En este caso, sé que puedo usar el evento de botón para hacer esto, pero quiero que el div active el evento cuando se cambie la altura. Por favor ayuda. Gracias por adelantado.
Por el bien del futuro, publicaré esto. Si no necesita soportar <IE11, entonces debe usar MutationObserver.
Aquí hay un enlace al caniuse js MutationObserver
Uso simple con resultados potentes.
var observer = new MutationObserver(function (mutations) {
//your action here
});
//set up your configuration
//this will watch to see if you insert or remove any children
var config = { subtree: true, childList: true };
//start observing
observer.observe(elementTarget, config);
Cuando ya no necesite observar más simplemente desconecte.
observer.disconnect();
Consulte la documentación de MDN para obtener más información
Por favor no use las técnicas descritas en otras respuestas aquí. No están trabajando con cambios de tamaño de animaciones css3, cambios de diseño flotantes o cambios que no provienen de jQuery land. Puede usar un detector de cambio de tamaño, un enfoque basado en eventos, que no pierde el tiempo de su CPU.
https://github.com/marcj/css-element-queries
Contiene una clase ResizeSensor que puede usar para ese fin.
new ResizeSensor(jQuery(''#mainContent''), function(){
console.log(''main content dimension changed'');
});
Descargo de responsabilidad: escribí esta biblioteca
Primero, no hay tal evento css-changes fuera de la caja, pero puede crear uno por su cuenta, ya que onchange is for :input elements only. no para cambios de css.
Hay dos formas de rastrear los cambios en css.
- Examine el elemento DOM para los cambios CSS cada x vez (500 milisegundos en el ejemplo).
- Dispare un evento cuando cambie el elemento css.
- Use el evento de mutación
DOMAttrModified. Pero está en deprecated , así que me lo saltearé.
Primera forma:
var $element = $("#elementId");
var lastHeight = $("#elementId").css(''height'');
function checkForChanges()
{
if ($element.css(''height'') != lastHeight)
{
alert(''xxx'');
lastHeight = $element.css(''height'');
}
setTimeout(checkForChanges, 500);
}
Segunda forma:
$(''#mainContent'').bind(''heightChange'', function(){
alert(''xxx'');
});
$("#btnSample1").click(function() {
$("#mainContent").css(''height'', ''400px'');
$("#mainContent").trigger(''heightChange''); //<====
...
});
Si controla los cambios de css, la segunda opción es una forma mucho más elegante y eficiente de hacerlo.
Documentaciones: