Question

我有一个具有以下CSS的div：

#div1 {
    position: absolute;
    top: 310px;
    left: 625px;
    display: none;
    color: #515151;
    z-index: 100;
}

通过jQuery click函数显示，该函数添加带有规则display: block的类。我使用以下JavaScript测试div是否在移动设备上显示，如果是，它将更改left属性：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  $('#div1').css({'left':'535px !important'});
  var left = $('#div1').css('left');
  alert(left);
}

问题是，该规则不会被覆盖！ alert返回left属性的原始值。为什么这不起作用？

注意：：如果有帮助，则将该div放在position: static的div中。

Answer 1

在!important函数中使用css是一个已知的封闭issue，它不是固定的。您可以从上方删除!important，也可以尝试以下替代方法。

console.log($("#abc").css('left'));
document.getElementById("abc").style.setProperty("left", "525px", "important");
console.log($("#abc").css('left'));

#abc {
    position: absolute;
    top: 310px;
    left: 535px;
    display: none;
    color: #515151;
    z-index: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">Test</div>

请注意，您也可以创建具有上述样式的类，也可以添加该类。

Answer 2

一个想法是将元素的ID仅用作参考，然后将其CSS样式移至新类，并添加到div元素中。

一旦新的左值始终相同，您就可以拥有一个单独的类，当满足以下条件时，您可以将其添加到元素中。

<!-- div element -->
<div id="div1" class="element">...</div>

.element {
    position: absolute;
    top: 310px;
    left: 625px;
    display: none;
    color: #515151;
    z-index: 100;
}

.div-left {
    left: 535px !important;
}

在您的javascript中：

if(<condition>) {
    $('#div1').addClass('div-left');
}

Answer 3

对于感兴趣的任何人，将父div的位置更改为relative都可以。希望我首先尝试过！

CSS left！important不覆盖先前的left值

3 个答案: