Question

是否可以使用JavaScript / jQuery永久覆盖CSS文件？我想只覆盖1或2行。

假设我有这个CSS文件：

div#box { width:100px; height:100px; }

然后，如果我应用这种JavaScript：

var sheet = document.createElement('style')
sheet.innerHTML = "div#box {width:200px;}";
document.body.appendChild(sheet);

只要调用JavaScript（由JavaScript动态更改）

，div就会重新调整大小

我希望CSS文件会像这样被覆盖

div#box {width:100px; height:100px; }
div#box {width:200px; } //CSS added

或更好，

div#box {width:200px; height:100px; } //CSS overwritten

我该怎么办？

Thx：D

Answer 1

详细说明所说的内容（并且mmmshuddup和calchen是正确的）：

Javascript在客户端更改文件，直到文档关闭。脚本所做的更改完全是暂时的。

然而，javascript 可能在技术上使用ajax来访问perl / ruby / php / python /在服务器上挂出的任何脚本会接受参数（类会是什么，它会是哪个元素被添加到）并永久地将类应用于您的文档，或以其他方式编辑您的样式文档。

另一个解决方案是创建和添加类，然后将这些类保存为用户的首选项;你将创建一个函数，该函数查看元素id的关联数组以及需要在加载页面时添加的类。如果您有用户，我想您可以使用cookie或最好使用数据库。我只是在那里抛出假设。

我非常确定服务器端编辑理念是您的最佳选择。使用正则表达式定位id并用新样式替换它们可能是相当安全的。

编辑：在考虑它之后，我意识到你的风格发现和替换功能必须非常复杂，如果你想要更换涉及大量选择器的样式。可能有一个更优雅的解决方案，但它不会来找我。我认为这最终将是一个严重的问题。

Answer 2

CSS不能仅使用jQuery / JavaScript永久覆盖。

Answer 3

尝试以下

$(document).ready (function() {

$('div#box').css( {"border": "1px solid #7F9DB9", "width": "200px", "height": "22px"} );

});

请做一些必要的修改。

Answer 4

使用类似PHP的东西。否则，您可以使用jQuery修改css。

// for div#box {width:200px; height:100px; }
$('div#box').css({ width: '200px', height: '100px' });

Answer 5

JS不能单独执行此操作，您需要使用PHP等服务器端语言，如果您愿意，我可以在PHP中为您创建一个。

如果您希望每页执行此操作，可以使用具有contenteditable属性的样式标记，请参阅：http://devgrow.com/html5-contenteditable-attribute/