永久使用JavaScript / jQuery覆盖CSS

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);

div仅在调用JavaScript时才调整大小（由JavaScript动态更改）

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

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

或者更好的是

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

我该怎么办？

x

Answer 1

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

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

但是，从技术上讲，javascript 可以使用ajax访问服务器上挂出的perl / ruby​​ / php / python / whatever脚本，该脚本将接受参数（该类是什么，它将添加到哪个元素）并将这些类永久应用于您的文档，或以其他方式编辑样式文档。

另一种解决方案是创建和添加类，然后将这些类另存为用户的首选项。 您将创建一个函数，该函数通过元素ID及其类的关联数组进行查找，这些元素需要在加载页面时添加。 如果您有用户，我想您将为此使用cookie或数据库。 我只是把假设扔在那里。

我很确定服务器端编辑的想法是您最好的选择。 使用正则表达式来查找id并将其替换为新样式可能非常安全。

编辑：考虑到这一点，我意识到，如果您想进行涉及很多选择器的样式替换，则样式查找和替换功能必须非常复杂。 可能有一个更优雅的解决方案，但这并不是我想要的。 我认为这最终将是一个严重的头痛。

Answer 2

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

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/