动态更改CSS在Chrome中不工作

Dynamically change CSS won't work in Chrome

本文关键字：工作 Chrome CSS 动态      更新时间：2023-09-26

我有一个页面从全局样式表中接收一个很大的左边距，我不允许更改。边距实际上是由脚本/样式表内联编写的，所以我不能在打印样式中更改它。我能够找到一个jQuery解决方案，似乎在FF和IE工作，但不幸的是不是在Chrome。Jquery函数:

$('#page').each(function(idx,el){
  el.style.margin='';
});

我尝试了从jquery css.('margin-left'，'0')到使用DOM属性的所有方法，但没有任何效果!如有任何帮助，不胜感激。

document.getElementById("page").style.margin="0";
document.getElementById("page").setAttribute("margin","0");
document.getElementById("page").setAttribute("margin-left","0");

描述

如果你正在使用jQuery，你应该使用jQuery函数，因为有跨浏览器兼容性。

问题是您正在使用id。id在您的文档中应该是唯一的。jQuery知道您正在使用id selector，并且只更改第一个元素。

使用类代替。查看我创建的jsFiddle演示。

示例

Css

.page { margin: 10px }
jQuery

$('.page').css("margin", "");

的更多信息
    <
  • jSFiddle演示/strong>
    • jQuery文档- .css()

更新

w3c说:id属性为HTML元素指定了一个唯一的id (id属性值在HTML文档中必须是唯一的)。

但是好吧，你说这个页面是一个现有的页面，你不想从id更改为' class。这是不标准的，不利于搜索引擎优化。

你可以这样做，让它与id工作。

样本

<div style="margin: 10px" id="page">div1</div>
<div style="margin: 10px" id="page">div2</div>
jQuery

$('[id="page"]').css("margin", "");
  • jsFiddle示范

如果您的全局样式表中没有标记!important，并且您可以在页面中编写css样式，那么请尝试将页面的页边距设置为如下

#page {
    margin: 0px !important;
}
相关文章：