如何在JavaScript中將CSS樣式從一頁更新到另一頁

Question

我有兩個頁面：index.php和app.php

第一頁（index.php）上放置了一些元素，這些元素我想更改其CSS樣式值（如字體大小）。 如此位於第一頁上： .options-parameters-input元素。

在第二頁（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中。

我希望你能幫幫我

謝謝

Answer 1

您可以實現兩種方式 ：

服務器端：您可以將值存儲在database（永久）中 。 然后下一頁您可以在CSS中應用。

客戶端：您可以將值存儲在查詢參數，cookie或本地存儲（臨時）中 。 然后下一頁您可以在CSS中應用。

Answer 2

您無法使用另一頁面上的JavaScript代碼來更新一個頁面的CSS。 盡管您可以做的是在頁面之間共享一個標識符。 可以說一個URL參數說index.php？fontsize = 10和app.php？fontsize = 10 。

然后，您可以在任一頁面的代碼中獲取param fontsize的值，並將其設置為所需的值，然后使用javaScript將其傳遞。

您可以在應用程序啟動時為fontsize設置一個默認值，或者檢查javaScript代碼中是否存在param fontsize 。

遵循我的這個答案 。

或者你可以利用的localStorage的- > Window.localStorage（）或餅干 - > 的document.cookie（） 。

我建議通過URL param方法或設置localStorage對象fontSize並在需要時進行更新，如果您不想使用服務器端代碼並​​在數據庫中推送fontsize的值。

Answer 3

正如詹姆斯·蒙格（James Monger）所說，這不可能直接實現。 但是，您可以通過PHP保存更改（用於會話或數據庫）。 然后，當用戶打開index.php時，將根據保存的設置生成另一個<style>...</style> 。 可以通過使用表單或ajax調用（更復雜）來保存設置。

您也可以直接從JavaScript寫入Cookie並在另一頁上閱讀