javascript - 我如何覆盖具有!important属性的padding-left

我有下面的代码，我想覆盖具有!important属性的padding-left元素。谁能给我任何想法？

jQuery("a.orderLink").css("padding-left", "300px", "important");

最佳答案

使用cssText可以解决此问题。因此在链接的整个CSS中加入重要的部分;


  cssText属性将样式声明的内容设置或返回为字符串。


见下文 ：

function myFunction() {
  var x = document.querySelectorAll("a.orderLink.csshidepipe");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.color = "#FFC214";
    x[i].style.backgroundImage = "none";
    x[i].innerHTML = "<i class='fa fa-shopping-cart hidden-xs disabled fa-lg'></i> Order Online";
  };
  $("a.orderLink").css("cssText","padding-left:250px!important");

};
myFunction();

a.orderLink
{
  font-weight: bold;
  color: #028940;
  text-decoration: none;
  background: url("/~/media/C41A83E95BE94F6E873ED29BB40B90A7.png") left no-repeat;
  padding-left: 28px !important;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="orderLink">I have padding</a>

option2给该链接一个类并为其赋予重要样式

function myFunction() {
  var x = document.querySelectorAll("a.orderLink.csshidepipe");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.color = "#FFC214";
    x[i].style.backgroundImage = "none";
    x[i].innerHTML = "<i class='fa fa-shopping-cart hidden-xs disabled fa-lg'></i> Order Online";
  };
  $("a.orderLink").addClass("withPadding");

};
myFunction();

a.orderLink
{
  font-weight: bold;
  color: #028940;
  text-decoration: none;
  background: url("/~/media/C41A83E95BE94F6E873ED29BB40B90A7.png") left no-repeat;
  padding-left: 28px !important;
  margin: 0;
}
a.orderLink.withPadding {
padding-left:250px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="orderLink">I have padding</a>

这正在解决您的问题，但不是核心问题。核心问题是首先使用!important。我强烈建议反对使用它。它创建一个Snowball effect，它将影响您的整个编码。因此，请尝试不要在CSS或其他任何地方使用它，除非这是唯一的方法，即使如此，请重新考虑:)

关于javascript - 我如何覆盖具有!important属性的padding-left，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44519828/