js移入父元素改变父元素的高度显示子元素

可以通过以下步骤来实现：

1. 获取父元素和子元素的 DOM 对象：

var parent = document.getElementById("parent");
var child = document.getElementById("child");

2. 给父元素添加鼠标移入事件，当鼠标移入时计算子元素的高度并设置给父元素：

parent.onmouseover = function() {
  var height = child.offsetHeight;
  parent.style.height = height + "px";
};

这样当鼠标移入父元素时，父元素的高度会自动根据子元素的高度进行调整。

相关问题

鼠标点击子元素，父元素改变怎么设置

要实现当鼠标点击子元素时，父元素改变样式，可以使用JavaScript来实现。

首先，你需要为子元素添加一个事件监听器，以便在它被点击时通知父元素。例如，在下面的示例中，我们将为子元素`<a>`添加一个事件监听器，当它被点击时，将调用一个名为`changeParentStyle()`的函数：

<div id="parent">
  <a href="#">子元素</a>
</div>

<script>
  const child = document.querySelector('a');
  child.addEventListener('click', changeParentStyle);

  function changeParentStyle() {
    const parent = document.querySelector('#parent');
    parent.style.backgroundColor = 'red';
  }
</script>

在这个示例中，当用户点击子元素`<a>`时，`changeParentStyle()`函数将被调用。它选择父元素`<div>`，并将其背景颜色更改为红色。

请注意，这只是一个简单的示例。你可以根据需要调整代码，例如添加其他样式或在点击时执行其他操作。

js点击子元素不触发父元素

要实现点击子元素不触发父元素的效果，可以使用事件委托。在父元素上绑定点击事件，并通过事件对象的 target 属性判断是否是子元素触发的事件。如果是子元素触发的事件，则可以阻止事件冒泡，从而避免触发父元素的点击事件。

示例代码如下：

var parent = document.getElementById('parent');

parent.addEventListener('click', function(event) {
  if (event.target !== parent) {
    event.stopPropagation();
    // 处理子元素点击事件的逻辑
  }
});

在这个示例中，我们在父元素上绑定了一个点击事件，然后在事件处理函数中判断事件触发的目标是否是父元素本身。如果不是，则阻止事件冒泡并处理子元素的点击事件逻辑。这样就可以实现点击子元素不触发父元素的效果了。