onresize div元素？ [英] Onresize for div elements?
本文介绍了onresize div元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Visual Studio突出显示了我< onresize 属性，并表示它不是有效的属性为HTML5。这是真的？我应该用什么来代替？看起来很愚蠢，情况就是如此。
解决方案
将以下CSS和JavaScript添加到您的页面，并使用 addResizeListener 和 removeResizeListener 方法来监听元素大小的变化（更多详细信息请参阅博客文章： http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element- resize-detection / ）：
调整传感器CSS
.resize-triggers {
visibility：hidden;
}
.resize-triggers，.resize-triggers> div，.contract-trigger：之前{
content：;
display：block;
位置：绝对;
top：0;
剩下：0;
身高：100％;
宽度：100％;
overflow：hidden;
}
.resize-triggers> div {
background：#eee;
溢出：auto;
}
。合约触发器：在{
width：200％;
身高：200％;
调整事件方法
以下是启用调整大小事件侦听所需的JavaScript。前两个函数是在主要addResizeListener和removeResizeListener方法中使用的先决条件。
（function（）{
var attachEvent = document.attachEvent;
$ b $ if（！attachEvent）{
var requestFrame =（function（）{
var raf = window.requestAnimationFrame || window .mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
function（fn）{return window.setTimeout（fn，20）;};
return function（fn）{return raf（fn）;};
$ b var cancelFrame =（function（）{
var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
window .clearTimeout;
return function（id）{return cancel（id）;};
}）（）;
函数resetTriggers（element）{
var triggers = element .__ resizeTriggers__，
expand = triggers.firstElementChild，
contract = triggers.lastElementChild，
expandChild = expand.firstElementChild;
contract.scrollLeft = contract.scrollWidth;
contract.scrollTop = contract.scrollHeight;
expandChild.style.width = expand.offsetWidth + 1 +'px';
expandChild.style.height = expand.offsetHeight + 1 +'px';
expand.scrollLeft = expand.scrollWidth;
expand.scrollTop = expand.scrollHeight;
};
function checkTriggers（element）{
return element.offsetWidth！= element .__ resizeLast __。width ||
element.offsetHeight！=元素.__ resizeLast __。height;
}
函数scrollListener（e）{
var element = this;
resetTriggers（this）;
if（this .__ resizeRAF__）cancelFrame（this .__ resizeRAF__）;
this .__ resizeRAF__ = requestFrame（function（）{
if（checkTriggers（element））{
element .__ resizeLast __。width = element.offsetWidth;
element .__ resizeLast __。height = element.offsetHeight;
element .__ resizeListeners __。forEach（function（fn）{
fn.call（element，e）;
}）;
}
}） ;
};
window.addResizeListener = function（element，fn）{
if（attachEvent）element.attachEvent（'resize'，fn）;
else {
if（！element .__ resizeTriggers__）{
if（getComputedStyle（element）.position =='static'）element.style.position ='relative';
元素.__ resizeLast__ = {};
元素.__ resizeListeners__ = [];
（element .__ resizeTriggers__ = document.createElement（'div'））。className ='resize-triggers';
element .__ resizeTriggers __。innerHTML ='< div class =expand-trigger>< div>< / div>< / div>'+
'< div class =合同触发>< / DIV>';
element.appendChild（element .__ resizeTriggers__）;
resetTriggers（element）;
element.addEventListener（'scroll'，scrollListener，true）;
}
元素.__ resizeListeners __。push（fn）;
}
};
window.removeResizeListener = function（element，fn）{
if（attachEvent）element.detachEvent（'resize'，fn）;
else {
element .__ resizeListeners __。splice（element .__ resizeListeners __。indexOf（fn），1）;
if（！element .__ resizeListeners __。length）{
element.removeEventListener（'scroll'，scrollListener）;
元素.__ resizeTriggers__ =！element.removeChild（element .__ resizeTriggers__）;
}
}
}
}）（）;
Demo-licious！
这是该方法的伪代码用法。
var myElement = document.getElementById（'my_element'），
myResizeFn = function（）{
/ *做一些调整大小* /
};
addResizeListener（myElement，myResizeFn）;
removeResizeListener（myElement，myResizeFn）;
Visual Studio highlighted my onresize attribute of my div tag, and says that it isn't a valid attribute for HTML5. Is this true? What should I use instead? It seems kind of silly that this would be the case.
解决方案
Add the following CSS and JavaScript to your page, and use the addResizeListener and removeResizeListener methods to listen for element size changes (blog post for further details: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/):
Resize Sensor CSS
.resize-triggers {
visibility: hidden;
}
.resize-triggers, .resize-triggers > div, .contract-trigger:before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.resize-triggers > div {
background: #eee;
overflow: auto;
}
.contract-trigger:before {
width: 200%;
height: 200%;
}
Resize Event Methods
The following is the JavaScript you’ll need to enable resize event listening. The first two functions are prerequisites that are used in the main addResizeListener and removeResizeListener methods.
(function(){
var attachEvent = document.attachEvent;
if (!attachEvent) {
var requestFrame = (function(){
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
function(fn){ return window.setTimeout(fn, 20); };
return function(fn){ return raf(fn); };
})();
var cancelFrame = (function(){
var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
window.clearTimeout;
return function(id){ return cancel(id); };
})();
function resetTriggers(element){
var triggers = element.__resizeTriggers__,
expand = triggers.firstElementChild,
contract = triggers.lastElementChild,
expandChild = expand.firstElementChild;
contract.scrollLeft = contract.scrollWidth;
contract.scrollTop = contract.scrollHeight;
expandChild.style.width = expand.offsetWidth + 1 + 'px';
expandChild.style.height = expand.offsetHeight + 1 + 'px';
expand.scrollLeft = expand.scrollWidth;
expand.scrollTop = expand.scrollHeight;
};
function checkTriggers(element){
return element.offsetWidth != element.__resizeLast__.width ||
element.offsetHeight != element.__resizeLast__.height;
}
function scrollListener(e){
var element = this;
resetTriggers(this);
if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
this.__resizeRAF__ = requestFrame(function(){
if (checkTriggers(element)) {
element.__resizeLast__.width = element.offsetWidth;
element.__resizeLast__.height = element.offsetHeight;
element.__resizeListeners__.forEach(function(fn){
fn.call(element, e);
});
}
});
};
}
window.addResizeListener = function(element, fn){
if (attachEvent) element.attachEvent('resize', fn);
else {
if (!element.__resizeTriggers__) {
if (getComputedStyle(element).position == 'static') element.style.position = 'relative';
element.__resizeLast__ = {};
element.__resizeListeners__ = [];
(element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' +
'<div class="contract-trigger"></div>';
element.appendChild(element.__resizeTriggers__);
resetTriggers(element);
element.addEventListener('scroll', scrollListener, true);
}
element.__resizeListeners__.push(fn);
}
};
window.removeResizeListener = function(element, fn){
if (attachEvent) element.detachEvent('resize', fn);
else {
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
if (!element.__resizeListeners__.length) {
element.removeEventListener('scroll', scrollListener);
element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
}
}
}
})();
Demo-licious!
Here’s a pseudo code usage of the method.
var myElement = document.getElementById('my_element'),
myResizeFn = function(){
/* do something on resize */
};
addResizeListener(myElement, myResizeFn);
removeResizeListener(myElement, myResizeFn);
这篇关于onresize div元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
