Question

我有以下HTML代码：

<div title="remove css"style="position:relative;">Remove my style</div>

我必须在页面加载后完全删除position样式属性。我处于无法覆盖CSS的情况。我必须完全删除position样式。这怎么可能？

Answer 1

您可以像这样覆盖css：

$('div').css({'position': 'static'});

http://api.jquery.com/css/

Answer 2

您是否可以使用CSS设置初始位置，然后使用jQuery在doc ready removeClass上设置？

See Fiddle

这看起来像你之后的那样吗？

Answer 3

使用jquery覆盖原始值

$("#ID").css("rule","newvalue");

OR create使用oposite规则创建一个新类 所有元素的默认定位是静态 所以喜欢这个

myclass{
position:static!important;   //to overwrite anything else

}

然后使用jquery

$("#id").addClass("myclass");

Answer 4

好吧，你可以使用jquery完全删除position属性。代码应该是：

$('div').removeAttr("position");

Answer 5

您不需要为这个简单的任务使用jQuery，特别是如果您还没有使用它。

只需在div上添加内联样式，这将覆盖现有的CSS。

function overridePosition() {
  var divs = document.getElementsByTagName('div'),
    len = divs.length,
    i = 0;
  for (; i < len; i += 1) {
    // static is the default value of possition
    divs[i].style.position = 'static';
  }
}

window.onload = function() {
  document.querySelector('button').addEventListener('click', overridePosition);
};

div {
  position: relative;
  left: 50px;
}

<button>
  Click Me To override position: relative
</button>
<div>
  <div title="remove css">Remove my style</div>
  <div title="remove css">Remove my style</div>
  <div title="remove css">Remove my style</div>
  <div title="remove css">Remove my style</div>
</div>

有一种方法可以实际删除规则，但我强烈建议不要这样做。它不是一个跨浏览器的解决方案，从长远来看，它更麻烦然后它是值得的。

function deletePosition() {
  var cssRules = document.styleSheets[0];

  // the only reason we know what index the rule is at is because it is the only rule.
  var ruleIndex = 0;
  
  if (typeof cssRules.deleteRule == "function") {
    cssRules.deleteRule(ruleIndex);
  } else if (typeof cssRules.removeRule == "function") {
    cssRules.removeRule(ruleIndex);
  } else {
    // don't know how to remove/delete css rule
  }
}


window.onload = function() {
  document.querySelector('button').addEventListener('click', deletePosition);
};

div {
  position: relative;
  left: 50px;
}

<button>
  Click Me To delete css position: relative rule
</button>
<div>
  <div title="remove css">Remove my style</div>
  <div title="remove css">Remove my style</div>
  <div title="remove css">Remove my style</div>
  <div title="remove css">Remove my style</div>
</div>

如何动态覆盖内联样式？

5 个答案: