How to update css style from one page to another in JavaScript

Question

I have two pages: index.php and app.php

on first page (index.php) are placed elements for which I want to change css style value like font size. so on first page is located: .options-parameters-inputelement.

on the second page (app.php) is my options panel with inputs where i can input font size value for the desired element. in this case input is textarea #heretype

please see the code:

<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 example: http://jsfiddle.net/gxTuG/106/

My problem is how to transfer new css style value from one page (app.php) to another (index.php) ? because inputs are located in app.php page while desired elements are in index.php.

I hope you can help me

Thank you

please refer http://stackoverflow.com/questions/32535660/how-to-pass-value-one-page-to-another-page-using-html — power_scriptor, Dec 01 '16 at 13:17
If both pages have `` then you could try editing the stylesheet programmatically which should affect any page linked to it, but each page would need to refresh in order to repaint styles. — zer00ne, Dec 01 '16 at 13:18
I do not know if this helps or not, but app.php opens inside index.php, both pages are open. — Bundyboy, Dec 01 '16 at 13:48
if that is the case then you can have a single css included in index.php, that will do — Sudhansu Choudhary, Dec 02 '16 at 06:41

score 1 · Answer 1 · answered Dec 01 '16 at 13:20

You can achieve two ways:

Server side: You can stored the value in database(permanent). Then next page you can apply in css.

Client side: You can stored the value in query parameter, cookie or local storage(temporary). Then next page you can apply in css.

score 0 · Answer 2 · edited May 23 '17 at 12:13

You can't update css of one page using javascript code from another page. Although what you could do is have an identifier to be shared between the pages. That could be lets say a url param saying index.php?fontsize=10 and app.php?fontsize=10.

Then you can get the value of the param fontsize in your code on either pages and set it to the desired value and pass it around using javaScript.

You can have a default value for the fontsize at starting of the app or have a check saying if param fontsize exists or not in your javaScript code.

Follow this answer of mine.

Alternatively you can make use of localStorage -> Window.localStorage() or cookies -> Document.cookie().

I would suggest going by either the URL param method or setting a localStorage object fontSize and update it whenever needed if you don't want to go with server side code and push the value of fontsize in db.

score 0 · Answer 3 · answered Dec 01 '16 at 13:20

As James Monger said, this isn't directly possible. However you can save the changes via PHP (to session or to database). Then when the user opens index.php a different <style>...</style> will be generated based on the saved setting. The setting can be saved by using a form or an ajax call (more complicated).

You can also write to a cookie directly from JavaScript and read it on another page

How to update css style from one page to another in JavaScript

3 Answers3