[英]How to dynamically change classes when DIV width changes?
I know how to change classes with Jquery when the window size is changed, but I need it to be based on the width of a DIV and change dynamically when the DIV's width changes. 我知道如何在更改窗口大小时使用Jquery更改类,但是我需要它基于DIV的宽度并在DIV的宽度更改时动态更改。
$(window).resize(function() {
var wrapWidth = $('.info-wrap').width();
if (wrapWidth >= 500) {
$('#partOne').addClass('big');
$('#partTwo').addClass('big');
} else {
$('#partOne').removeClass('big');
$('#partTwo').removeClass('big');
}
});
This works when the window size changes. 当窗口大小更改时,此方法有效。 But, what can I use insead of $(window).resize to get the width of the DIV as it changes?
但是,我可以使用$(window).resize的输入来获取DIV随宽度变化的宽度吗?
Here is an example of observing the elements attributes. 这是观察元素属性的示例。
See: MutationObserver
and Mutation Events
请参阅:
MutationObserver
和Mutation Events
CSS CSS
#watch {
border: 1px solid;
}
HTML HTML
<button id="button">Click me</button>
<div id="watch" style="width: 100px; height: 50px;"></div>
Javascript 使用Javascript
/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/* global global */
(function (global) {
"use strict";
if (typeof global.MutationObserver !== "function") {
global.MutationObserver = global.WebKitMutationObserver || global.MozMutationObserver;
}
var watch = document.getElementById("watch");
function whenClicked() {
watch.style.width = "200px";
}
document.getElementById("button").addEventListener("click", whenClicked, false);
if (typeof global.MutationObserver !== "function") {
// chrome doesn't despatch an event for "DOMAttrModified"
watch.addEventListener("DOMAttrModified", function (evt) {
console.log("Attribute changed", evt.target);
}, false);
} else {
var observer = new global.MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type === 'attributes') {
console.log("Attribute changed", mutation);
}
});
});
observer.observe(watch, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
}(window));
I wrote a plugin sometime back for attrchange listener which basically adds a listener function on attribute change. 我有时为attrchange监听器写了一个插件,它基本上在属性更改时添加了一个监听器功能。 This seems to come in handy for scenario that you had mentioned where you need a handler to check the width and height.
对于您提到的需要处理程序检查宽度和高度的情况,这似乎很方便。
DEMO: http://jsfiddle.net/CKTk3/1/ 演示: http : //jsfiddle.net/CKTk3/1/
var prevWidth = $('#test').width(),
prevHeight = $('#test').height();
$('#test').attrchange({
callback: function (e) {
var curWidth = $(this).width(),
curHeight = $(this).height();
if (prevWidth !== curWidth ||
prevHeight !== curHeight) {
console.log('resized: width - ' + prevWidth + ' : ' + curWidth + ' height - ' + prevHeight + ' : ' + curHeight);
prevWidth = curWidth;
prevHeight = curHeight;
}
}
}).resizable();
Plugin page: http://meetselva.github.io/attrchange/ 插件页面: http : //meetselva.github.io/attrchange/
I think you'll need to use a plugin for JQuery, such Ben Alman's plugin . 我认为您需要为JQuery使用一个插件,例如Ben Alman的plugin 。
I don't think there exists something that detects when a div gets resize, only the window. 我不认为有什么东西可以检测div何时调整大小,只有窗口可以检测。
You can get div width by div class or id. 您可以通过div类或id获取div宽度。 ex: $("#div-id").width();
例如:$(“#div-id”)。width();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.