I am looking to dynamically add temporary CSS code to the end of an external CSS file or modify it using JavaScript or jQuery. For example, let's say my mystyle.css file looks like this:
//mystyle.css
p{color:red}
Now, when a user interacts with the page and changes the color to green using JavaScript, I want the mystyle.css file to reflect this change by adding the new style or creating a temp.css file dynamically.
Expected Result:
//temp.css or newstyle.css
//(not saved/stored on host - just a temporary file in the user's browser)
p{color:"red"}
p{color:"green"} //this code should be added by JavaScript in mystyle.css and remove red automatically as the browser will automatically use green instead of red
Note 1: I do not want to permanently change the original file with server-side processes. Instead, I want the new styling to be removed when the user refreshes the page. Also, I prefer not to use inline styling as I need to copy the new style-code for personal use.
Note 2: I am not looking to overwrite the existing code but rather edit the existing code (changing red to green in the CSS file) or add new CSS code below the existing styles in mystyle.css.