动态更改 CSS 在 Chrome 中不起作用答案

【问题标题】：Dynamically change CSS won't work in Chrome动态更改 CSS 在 Chrome 中不起作用
【发布时间】：2011-12-29 15:08:24
【问题描述】：

我有一个页面正在接收来自全局样式表的大左边距，我不允许更改该样式表。边距实际上是由脚本/样式表内联写入的，因此我无法在我的打印样式中更改它。我能够找到一个似乎适用于 FF 和 IE 的 jQuery 解决方案，但不幸的是，它不适用于 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");

【问题讨论】：

试试：$('#page').css("margin", 0);
能否请您在 jsfiddle.net 中添加 html 或现场示例？
好吧setAttribute 肯定行不通。我猜$('#page').css('margin', 0) 也不起作用？保证金实际上是如何设置的？你提到了一个全局样式表和其他地方写成“内联”。那么现在是什么情况？您是否尝试包含仅用于打印的第二个样式表，它会覆盖另一个样式表中的边距？恐怕没有看到实际代码，就没有什么好说的了。

标签： javascript jquery css google-chrome printing

【解决方案1】：

说明

如果你使用 jQuery，你应该使用 jQuery 函数，因为它们是为跨浏览器兼容性而设计的。

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

改为使用类。查看我创建的 jsFiddle 演示。

样本

CSS

.page { margin: 10px }

jQuery

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

更新

w3c 说：id 属性为 HTML 元素指定一个唯一的 id（id 属性值在 HTML 文档中必须是唯一的）。

但是好的，您说该页面是现有页面，并且您不想从 id 更改为 `class.这不是标准的，也不利于搜索引擎优化。

您可以这样做以使其与id 一起工作。

示例

HTML

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

jQuery

$('[id="page"]').css("margin", "");

jsFiddle Demonstration

【讨论】：

那为什么不$('#page').css("margin, "");呢？
问题是他使用了一个id。如果您在 id 上使用 css，jQuery 只会更改第一个元素，因为 id 应该是唯一的。
没关系。 $('#page') 将始终只包含一个元素，无论存在多少具有相同 ID 的元素。在内部，jQuery 将使用getElementById 或querySelector。如果您希望所有元素都具有相同的 ID，则必须使用 $('[id="page"]')。在任何情况下，与其解决使具有相同 ID 的元素工作的问题，修复 ID 会更好。
他为什么要使用类？为什么你认为他有多个具有相同 ID 的元素？
$('.page').css("margin", "")。仅适用于内联样式：jsfiddle.net/VtZKk/1 - 它仅将样式重置为标准或 css。使用$('.page').css("margin", 0) 强制为0 jsfiddle.net/VtZKk/2

【解决方案2】：

如果你的全局样式表中边距没有用 !important 标记，并且如果你被允许在你的页面中编写 css 样式，那么尝试在你的页面中设置边距，如下所示

#page {
    margin: 0px !important;
}

【讨论】：

说明

样本

更多信息

更新

示例