更改克隆元素的 css

Question

我用 jquery 将一个 div 克隆到另一个 div 上，它工作正常。我遇到的问题是我克隆的 div 的孩子在克隆它之前分配了一个 CSS，所以当我克隆并将它附加到另一个 div 时，它也会传输 CSS 数据。克隆后我尝试更改 div 的 CSS，但主要 CSS 正在覆盖它。我尝试了重要的属性，但它没有用。如何更改克隆元素的 CSS？注意：如果克隆的 div 没有任何先前的 CSS，则以下方法有效。任何帮助表示赞赏。提前致谢。

更新：

正如建议的那样，我已经包含了完整的代码，但请记住，克隆的元素现在被附加到弹出框。要查看克隆点击.newDiv

//what I tried, it didn't work

var popOverSettings = {
  selector: '.newDiv',
  container: 'body',
  html: true,
  trigger: 'click',
  placement: 'bottom',
  sanitize: false,
  content: function() {
    //i am getting the "to be cloned" element from a child iframe
    let source = $('.oldDiv').children().eq(0)
    $('.popoverCon').append('<div class="popoverContent"></div>')
    source.clone(true).appendTo('.popoverContent')
    $('.popoverContent').find('.oldDivChild').css({
      'bottom': '0%',
      'width': '100%',
      'height': '100%'
    })
    return $('.popoverCon').html();
  }

}

$(function() {
  $('body').popover(popOverSettings);
});

.oldDiv {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 30%;
  height: 40%;
}

.oldDivChild {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 70%;
  background-color: blue;
}

.newDiv {
  position: absolute;
  top: 0%;
  right: 0%;
  width: 30%;
  height: 40%;
  background-color: red;
}

.popoverCon {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<div class="oldDiv">
  <div class="oldDivChild"></div>
</div>

<div class="newDiv">

</div>

<div class="popoverCon"></div>

Answer 1

我相信删除类并在克隆后添加一个新类可以解决您的问题。

source.clone(true).removeClass('oldDivChild').addClass('myNewClassName').appendTo('.popoverContent')

或者，您也可以使子 css 规则仅适用于父 > 目标对而不更改您的 javascript

.oldDiv .oldDivChild {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 70%;
  background-color: blue;
}

这样克隆的 div 将具有 .oldDivChild，但不会应用 css，因为它位于不同的父级上。