如何在 JavaScript 中将 CSS 样式从一个页面更新到另一个页面答案

【问题标题】：How to update css style from one page to another in JavaScript如何在 JavaScript 中将 CSS 样式从一个页面更新到另一个页面
【发布时间】：2016-12-01 13:09:47
【问题描述】：

我有两个页面：index.php 和 app.php

在第一页 (index.php) 上放置了我想要更改 css 样式值（如字体大小）的元素。所以第一页位于：.options-parameters-inputelement.

在第二页 (app.php) 上是我的选项面板，我可以在其中输入所需元素的字体大小值。在这种情况下，输入是 textarea #heretype

请看代码：

<div id="one">
<div class="options-parameters-input">
This is testing
</div>
</div>
<br /><br /><br /><br /><br /><br /><br />
<table width="750" border="1" cellspacing="3" style="float:left;">
  <tr>
    <td>Type font size</td>
    <td><textarea id="heretype"></textarea></td>
  </tr>
</table>


$("#heretype").on("keyup",both);

function both(){
$(".options-parameters-input").css("fontSize", this.value + "px");
}

jsfiddle 示例：http://jsfiddle.net/gxTuG/106/

我的问题是如何将新的 css 样式值从一个页面 (app.php) 转移到另一个 (index.php) ？因为输入位于 app.php 页面中，而所需元素位于 index.php 中。

希望你能帮到我

谢谢

【问题讨论】：

请参考stackoverflow.com/questions/32535660/…
如果两个页面都有<link href='path/to/style.css' rel='stylesheet'>，那么您可以尝试以编程方式编辑样式表，这会影响链接到它的任何页面，但每个页面都需要刷新才能重新绘制样式。
我不知道这是否有帮助，但是 app.php 在 index.php 中打开，两个页面都打开了。
如果是这种情况，那么您可以在 index.php 中包含一个 css，这样就可以了

标签： javascript html css

【解决方案1】：

你可以实现两种方式：

服务器端： 您可以将值存储在 database(permanent) 中。然后下一页你可以在css中申请。

客户端： 您可以将值存储在查询参数、cookie 或本地存储（临时）中。然后下一页你可以在css中申请。

【讨论】：

【解决方案2】：

正如 James Monger 所说，这不可能直接实现。但是，您可以通过 PHP 保存更改（保存到会话或数据库）。然后当用户打开index.php 时，将根据保存的设置生成不同的<style>...</style>。可以通过使用表单或 ajax 调用（更复杂）来保存设置。

您也可以直接从 JavaScript 写入 cookie 并在另一个页面上读取它

【讨论】：

【解决方案3】：

您不能使用另一页面的 javascript 代码更新一个页面的 css。尽管您可以做的是在页面之间共享一个标识符。这可以说是一个 url 参数说 index.php?fontsize=10 和 app.php?fontsize=10。

然后，您可以在任一页面的代码中获取参数 fontsize 的值，并将其设置为所需的值并使用 javaScript 传递它。

您可以在应用程序启动时为字体大小设置一个默认值，或者检查您的 javaScript 代码中是否存在参数 fontsize。

关注我的this answer。

您也可以使用 localStorage -> Window.localStorage() 或 cookies -> Document.cookie()。

我建议通过 URL 参数方法或设置 localStorage 对象 fontSize 并在需要时更新它，如果您不想使用服务器端代码并在 db 中推送 fontsize 的值。

【讨论】：