jQuery css() 不适用

Question

<a href="https://www.timeatthebar.co.uk" target="_blank"><img id="icon-img" src="assets/img/tabicon2.png" class="position-absolute top-50 start-50 translate-middle" style="max-width:113px; top: 43%!important; z-index:0;" alt=""></a>
<a id="savethepub" class="tab-base navbar-brand navbar-brand position-absolute top-50 start-50 translate-middle" style="top: 84%!important; font-size:22px;" href="#">Save The British Pub</a>

我遇到了 JQuery 的问题，我上面的代码是 HTML 并且都是正确的，下面的代码针对页面上的一个按钮。我已经使用测试进行了检查，按钮可以正常工作，但是 CSS 不适用。

var button = $( "#collapser" );
var tabimg = $( "#icon-img" );
var stp = $( "#savethepub" );

var bntclicked = false;

button.click(function() {
    if (bntclicked === false) {
        tabimg.css({"max-width":"70px", "top":"8%!important", "left":"21%!important", "z-index":"0"})
        stp.css({"font-size":"22px", "top":"7%!important"})

        bntclicked = true;
    }
    else if (bntclicked === true) {
        tabimg.css({"max-width":"113px", "top":"43%!important", "left":"50%!important", "z-index":"0"})
        stp.css({"font-size":"22px", "top":"84%!important"})

        bntclicked = false;
    }
});

按钮代码：

<button id="collapser" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

Answer 1

问题是因为您在提供给 css() 的对象的 CSS 属性值中包含了 !important 标志。这些无效，需要删除。

您还需要删除在 HTML 中添加的内联样式上的 !important 标志，因为它们完全是多余的。内联样式具有最高优先级，因此 !important 在那里无效，除非您在样式表的其他地方包含 !important，这再次意味着应该删除。

应尽可能避免使用 !important 标志，以支持使用选择器优先级。它唯一真正合法的用途是当你试图覆盖你无法控制的第三方来源应用的样式时——即使这样，规则优先级也应该是主要的解决方案。

试试下面的例子：

var button = $("#collapser");
var tabimg = $("#icon-img");
var stp = $("#savethepub");

var bntclicked = false;

button.click(function() {
  if (bntclicked === false) {
    tabimg.css({
      "max-width": "70px",
      "top": "8%",
      "left": "21%",
      "z-index": "0"
    });
    stp.css({
      "font-size": "22px",
      "top": "7%"
    })

    bntclicked = true;
  } else if (bntclicked === true) {
    tabimg.css({
      "max-width": "113px",
      "top": "43%",
      "left": "50%",
      "z-index": "0"
    });
    stp.css({
      "font-size": "22px",
      "top": "84%"
    });

    bntclicked = false;
  }
});

#icon-img { position: absolute; }
#savethepub { position: absolute; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="collapser">Collapser</button>

<a href="https://www.timeatthebar.co.uk" target="_blank">
  <img id="icon-img" src="assets/img/tabicon2.png" class="position-absolute top-50 start-50 translate-middle" style="max-width: 113px; top: 43%; z-index: 0;" alt="">
</a>
<a id="savethepub" class="tab-base navbar-brand navbar-brand position-absolute top-50 start-50 translate-middle" style="top: 84%; font-size: 22px;" href="#">Save The British Pub</a>

但是需要注意的是，如果使用类来应用样式，逻辑可以变得更简单.有效更新样式的 JS 逻辑就变成了一行：

var $button = $("#collapser");
var $tabimg = $("#icon-img");
var $stp = $("#savethepub");

$button.on('click', () => {
  $tabimg.add($stp).toggleClass('active');
})

#icon-img {
  position: absolute;
  max-width: 113px;
  top: 43%;
  z-index: 0;
}
#icon-img.active {
  max-width: 70px;
  top: 8%;
  left: 21%;
}

#savethepub {
  position: absolute;
  top: 84%;
  font-size: 22px;
}
#savethepub.active {
  top: 7%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="collapser">Collapser</button>

<a href="https://www.timeatthebar.co.uk" target="_blank">
  <img id="icon-img" src="assets/img/tabicon2.png" class="position-absolute top-50 start-50 translate-middle" alt="">
</a>
<a id="savethepub" class="tab-base navbar-brand navbar-brand position-absolute top-50 start-50 translate-middle" href="#">Save The British Pub</a>

Answer 2

失败的原因是您试图在 CSS 函数中添加 !important，这是不允许的。要使这项工作如您所愿，您有几个选择。您可以将所需的 CSS 放在 class 中，然后切换 class （这就是我要做的）。另一种选择是您可以使用 .attr() 函数来整体修改样式属性。另一种选择是使用 cssText 选择器，它允许您一键添加多个 CSS 规则。示例如下：

// Change width
$('#txt').css({
    'cssText': 'width: 220px !important; font-size: 12px;'
});

这里有一个 link 帮助：https://makitweb.com/how-to-add-important-to-css-property-with-jquery/

这是你的代码，去掉了 !important：

button.click(function() {
    if (bntclicked === false) {
        tabimg.css({"max-width":"70px", "top":"8%", "left":"21%", "z-index":"0"})
        stp.css({"font-size":"22px", "top":"7%"})

        bntclicked = true;
    }
    else if (bntclicked === true) {
        tabimg.css({"max-width":"113px", "top":"43%", "left":"50%", "z-index":"0"})
        stp.css({"font-size":"22px", "top":"84%"})

        bntclicked = false;
    }
});

jQuery css() 不适用

jQuery css() not applying

html

javascript

css

jquery

onclick