JSモニターDOM幅の高い変化

1105 ワード

javascript

JSの中でresize方法はwindowウィンドウの大きさの変化をモニターすることができます.もしあるDomの変化をモニターするなら、MuttionObserverを使って傍受します.例コードは以下の通りです.




	
	
	<style>

		#pp {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>


	<p id="pp"/>

	<button id="btn">btn</button>

	<script>

		var oP = document.getElementById('pp');

		let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
		let observer = new MutationObserver(function (mutations) {
			console.log("asdf", mutations);
		});

		observer.observe(oP, {
			attributes: true,
			attributeFilter:['style'],
			attributeOldValue:true
		});

		document.getElementById('btn').onclick = function () {
			oP.style.width = '300px';
		}
	</script>



</code></pre> 
  <p style="text-indent:33px;">     、API、       。</p> 
 </div> 
</div>
                            </div>
                        </div>

javascriptの“元素を獲得します”