Question

这是一个非常奇怪的问题，我很确定自己已经知道答案了，但是，在继续尝试解决的问题之前，我认为值得一提的是可能会从不同的角度来看

我目前正在编写一个带有特定元素（可以是任何DOM节点）的插件，并用div包装它。该插件的目的是在元素上添加“遮蔽”效果，然后可用于在滚动条上显示该元素。

注意： 用div包装对于我实现的功能是绝对必要的。

我的问题很简单，是否有人知道一种智能方式来保留所包装元素的样式并确保其外观与以前相同div包装，和，同时保留尺寸，以便可以在包装中插入另一个div，并且尺寸与同级包装相同。

请参阅以下非常基本的示例（在-注意蓝色盲注之前和之后）：

.test {
  display: flex;
  flex-flow: column;
  height: 200px;
  text-align: center;
}

.test:nth-child(1) {
  background: #999;
}

.test:nth-child(2) {
  background: #666;
}

.test > * {
  flex: 0 1 auto;
}

.test h1 {
  margin: auto 0 0;
  color: #fff;
}

.test p {
  margin: 0 0 auto;
  color: #fff;
}

.test-wrapper {
  position: relative;
  width: max-content; /* Fix for example purposes */
  margin: 0 auto; /* Fix for example purposes */
}

.test-wrapper .blind {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: blue;
  opacity: 0.5;
}

<div class="test">
  <h1>Before wrapper inserted</h1>
  <p>Some description</p>
</div>

<div class="test">
  <div class="test-wrapper">
    <div class="blind"></div>
    <h1>After wrapper inserted</h1>
  </div>
  <p>Some description</p>
</div>

在回答之前，这些是我要避免的解决方案：

将样式（或某些样式）从孩子“复制”或“移动”到父母，因为这可能会造成巨大的混乱。
在网站的CSS中将test-wrapper定义为test-wrapper的样式是特定于插件的元素。

一个显而易见且非常简单的解决方案是只为包装器定义样式，而不是在我的CSS（SCSS）中定义子样式。我很欣赏这可能是唯一的方法，但是理想情况下我想避免这种情况，因为我要构建的是一个插件，并且我希望HTML / CSS可以在没有元素包装的情况下使用。

智能DOM插入（保留子元素的样式）

0 个答案: