<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
<style>
#container{
width: 100%;
display: flex;
}
#id {
height: 200px;
background-color: green;
display: inline-block;
}
#hehe{
width: 100px;
height: 200px;
display: inline-block
}
</style>
</head>
<body>
<div id="container">
<div id="hehe"></div>
<div id="id"></div>
</div>
<button id="btn">惦记我啊啊啊啊啊 </button>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function(){
$("#id").append("<b>Hello</b>");
$("#hehe").css({ "width": "700px"});
// $(window).resize()
})
})
// ES-next version
// Select the node that will be observed for mutations
let targetNode = document.querySelector(`#id`);
// Options for the observer (which mutations to observe)
let config = {
attributes: true,
childList: true,
subtree: true,
attributeFilter:['style'],
attributeOldValue: true
};
// Callback function to execute when mutations are observed
const mutationCallback = (mutationsList) => {
for (let mutation of mutationsList) {
let type = mutation.type;
switch (type) {
case "childList":
console.log("A child node has been added or removed.");
break;
case "attributes":
console.log(`The ${mutation.attributeName} attribute was modified.`);
break;
case "subtree":
console.log(`The subtree was modified.`);
break;
default:
break;
}
}
};
// Create an observer instance linked to the callback function
let observer = new MutationObserver(mutationCallback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
// observer.disconnect();
</script>
</body>
</html>
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
