Question

所以我遇到了以下问题：

我有一个使用此CSS的元素（$(this)是克隆对象）：

clone.css({
   'width': $(this).width() + 'px',
   'height': $(this).height() + 'px',
   'top': $(this).offset().top - $(window).scrollTop() + 'px',
   'left': $(this).offset().left + 'px',
   'position': 'fixed'
});

点击我添加以下课程：

.dupe{
   top:0;
   left:0;
   width:100%;
   height:300px;
   border-radius:0;
   box-shadow:none;
   transition:all .3s ease-in-out;
}

这不起作用，因为jQuery会覆盖它。我不想使用!important。

那么有没有办法告诉CSS像＃34;现在你很重要，现在你不是＆＃34;，而不使用!important？

Answer 1

使用jQuery.css将样式设置为元素上的内联样式。您需要使用!important从样式表中覆盖它。

处理此问题的一种方法是为所有样式使用类名，并使用类来切换样式。

如果这不是一个选项，您可以在单击后使用jQuery.css将属性重置为其初始值（通过将它们设置为''）或将它们设置为需要的值

将它们设置为''的实例：

var clone = $(".target").clone();
clone.css({
   'width': '80px',
   'height': '20px',
   'top': '40px',
   'left': '50%',
   'position': 'fixed'
});
clone.appendTo(document.body);
console.log("Added styling to clone");
setTimeout(function() {
  console.log("Removed styling from clone");
  clone.addClass("dupe").css({
     'width': '',
     'height': '',
     'top': '',
     'left': '',
     'position': ''
  });
}, 800);

.target {
  border: 1px solid #ddd;
}
.dupe {
  color: blue;
}

<div class="target">
  Hi there
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果这也是一个选项，您也可以使用jQuery.removeAttr完全删除样式属性。这将有效地删除内联样式，允许您的其他样式启动。但它也将删除元素具有的任何其他内联样式。

完全删除style属性的实例：

var clone = $(".target").clone();
clone.css({
   'width': '80px',
   'height': '20px',
   'top': '40px',
   'left': '50%',
   'position': 'fixed'
});
clone.appendTo(document.body);
console.log("Added styling to clone");
setTimeout(function() {
  console.log("Removed styling from clone");
  clone.addClass("dupe").removeAttr("style");
}, 800);

.target {
  border: 1px solid #ddd;
}
.dupe {
  color: blue;
}

<div class="target">
  Hi there
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

jQuery将它的样式添加为内联，它总是覆盖常规css而不使用！important标记。我能想到的最好的方法就是将dupe类应用为内联样式。

类似的东西：

object.css({
    'top':'0',
    'left':'0',
    'width':'100%',
    'height':'300px',
    'border-radius':'0',
    'box-shadow':'none',
    'transition':'all .3s ease-in-out'
});

用普通的CSS覆盖jQuery中应用的CSS（没有！重要）

2 个答案: