我想知道当div改变其高度或任何css属性时如何触发事件.
我有一个id =的div mainContent.我希望jquery在更改高度时自动触发事件.我做了这样的事情:
$("#mainContent").change('height', function() {
$("#separator").css('height', $("#mainContent").height());
});
我知道错了.
这是我的整个代码(我粘贴了所有代码,因为我不知道因为某些原因而无法进入jsfiddle):
<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: …我想知道如何在使用纯JavaScript而不是jQuery库或任何其他库单击时使HTML元素<div>或<p>标记元素可调整大小.
我正试图检测我的document身高何时发生变化.一旦它,我需要运行一些功能来帮助组织我的页面布局.
我不是在找window.onresize.我需要整个文档,它比窗口大.
我如何观察这种变化？
是否有一个简单可靠的解决方案来检测窗口垂直滚动条出现/消失？
window.onresize 在JavaScript DOM操作页面变得足够高以显示滚动条之后,不会触发.
在这个非常相似的帖子中检测一个页面是否有垂直滚动条描述的解决方案如何检测滚动条是否存在,但我需要知道它何时出现.
Visual Studio突出显示onresize了我的div标记属性,并说它不是HTML5的有效属性.这是真的？我应该用什么呢？这种情况似乎有点愚蠢.
我正在寻找一个解决方案,但没有找到(只有文章(window:resize),但我不是在寻找).
如何检测元素大小的变化Angular 2？
<div #myElement (sizeChanged)="callback()" />
我想使用一些CSS动画并检测元素height和width变化.
我正在编写一个组件装饰器,能够检测DOM元素的大小何时被更改(通过css,javascript,窗口调整大小等).
它已经完美运行了,我现在正在尝试使其API易于使用,那么,比这更容易？
class Foobar extends React.Component {
render() {
return <div onResize={() => console.log('resized!')}>Foobar</div>;
}
}
ReactDOM.render(resizeAware(Foobar), app);
我面临的问题是,onResize当我触发它时,事件没有被触发......
这是两次触发事件的尝试:
// method 1
onResize() {
const resizeEvent = document.createEvent('HTMLEvents');
resizeEvent.initEvent('resize', true, true);
console.log('triggering resize...');
findDOMNode(this.componentNode).dispatchEvent(resizeEvent);
}
// method 2
onResize() {
console.log('triggering resize...');
findDOMNode(this.componentNode).dispatchEvent(new Event('resize'));
}
如果我用以下方式收听活动:
findDOMNode(this).addEventListener('resize', () => console.log('resized'));
一切正常.因此,我调度的事件似乎是由真正的DOM元素而不是虚拟DOM接收的.
现在的问题是,为什么onResize不调用回调？
如果没有解决方案,您将如何使我的装饰器API可用？
onResize有一个名为resize的新CSS属性,因此div也可以调整大小.但是如何附加事件监听器？因为.onresize只能在窗口对象上工作
JSFiddle:http://jsfiddle.net/3y0gfj8j/
编辑:
我不想使用JQuery.这不是一个重复的问题.我只发现了这个问题的JQuery解决方案,这就是我问这个问题的原因.
有点难以解释我想要达到的目标...我想要的是一个容器元素:
因此,如果内容宽度为100px,则容器宽度为150px.如果内容增长到170px,容器的大小会跳到300px.等等.容器永远不会是200px宽.150px或300px - 适合内容的最小值.
这可能与纯HTML/CSS,或这是否需要Javascript？
当前，在安装组件时，我触发一个事件以使当前元素的高度与当前元素的高度相同，但是，由于发送一次，该事件并不总是起作用，并且如果调整了元素的大小，它将不会再次发送。我还需要设置超时，因为有时ajax调用后componenet中的图表会更改高度。
何时更改当前元素的高度，如何发送此事件？
这是我目前正在做的：
mounted: function() {
setTimeout(function() {
this.$emit('resize', this.$el.offsetHeight);
},1000);
}
javascript ×8
css ×4
html ×4
jquery ×2
angular ×1
dom-events ×1
domdocument ×1
html5 ×1
reactjs ×1
resize ×1
scrollbar ×1
vue.js ×1