极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="http://localhost:8000/library/anly-ui/1.0.0/css/base.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8000/library/anly-ui/1.0.0/css/clear.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8000/library/anly-ui/1.0.0/css/custom.css">
<script type="text/javascript" src="http://localhost:8000/library/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<main>
<style type="text/css">
#d1 {
width: 100px;
height: 100px;
background-color: var(--color-default-1);
}
#d2 {
border: 1px solid var(--color-default-3);
}
</style>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$("#d1").css("height", $("#d1").height() + 100)
})
})
/* 不给d2设置高度, 确保d2高度和d1保持一致 */
</script>
<section id="module-1" style="width: 200px;">
<button id="btn" type="button" class="float-right">d1增高</button>
<div id="d1">d1</div>
<div id="d2">d2</div>
</section>
</main>
</body>
</html>
需求
d2高度和d1一致
网上一致找不到合适的方法, 有没有类似于属性绑定的方法, 或者监听div高度也可以
不要直接设置click->#d2.height(xxx), 这种方法试过了没用, 如果是展开动画效果怎么办?
需要的是d1和d2高度永远保持一致, d1高度增长了, d2跟着增长
flex布局肯定也是不行的, 如果这两个div不在同一个div容器之中呢
用
MutationObserver，可以覆盖大多数场景