Create a new CSS rule within a class, and remember to save the changes to

Upon opening page 1.html, I utilize JavaScript to dynamically add a background image to the body of the page. To achieve this, I use the following code:

document.body.style.backgroundImage = "url(http://www.example.com/image.jpg)";

This code effectively adds the background image to the CSS body class.

Now, my inquiry is this: How can I permanently save this modification to the CSS file using vanilla JS, located at http://www.example.com/my_css.css? This way, when accessing page 2.html, the body class will already have the background image applied.

Answer №1

When working within a typical setup, making changes to the CSS file is not possible. The CSS file resides on the server, accessible to all users, and there is no built-in method for browsers to overwrite files on the server.

In scenarios like this, one approach is to set a cookie on page 1 and retrieve it on page 2. By using the data stored in the cookie, you can determine if a different background image needs to be set.

An alternative is to store the necessary information elsewhere, such as local storage.

If the change in background image should be visible to all users, then the server must be informed. Typically, Ajax would be used for this purpose, with server-side code managing the data and sharing it across users (e.g., storing the status in a database and applying a corresponding class to the body element when generating HTML).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What happens when there is a 1-second delay in loading CSS on an HTML page?

Lately, I've been working on creating HTML and CSS pages. However, whenever I load a page, I notice that there's always a brief half-second flash of the HTML content without any styling applied. Does anyone have an idea why this is happening and ...

Why is it that this code can upload photos successfully, but not text files?

This is my PHP file for handling form actions. I have successfully implemented image uploads, but I am encountering an 'Invalid File Error' when trying to upload text files. What could be causing this error and how can I resolve it? <?php e ...

Tips for effectively utilizing Vuex to manage items within a Vuetify data table

I am currently sending an API request to retrieve an array of objects that has the following structure: returnedItems [ { name: 'Adam', age: '30', interest: 'Sports' }, ...

Unable to display Vue image within v-for loop

I'm facing an issue with rendering images from an array of objects. Even though the paths to the images are correct, the images are not displaying. I've been following a tutorial at which suggests specifying the image URLs as links. I've t ...

The appearance of Google Font CSS may vary when retrieved using WGET

Uncovering an issue while attempting to dynamically fetch a Google Fonts css file to extract the font URL. The scenario looks like this: (Viewed in Chrome) Contrast that with: WGET -qO- http://fonts.googleapis.com/css?family=Droid+Sans Upon inspecti ...

Encountering issues with parsing JSON data following its transmission through an Ajax request

Client Side Once an object has been processed with JSON.stringy, it is sent in this format to a node-server via a POST request: {"id":"topFolder","parentPath":null,"name":"newProject","is":"root","children":[]} The request is sent from the client side u ...

CSS deep level selectors

For the following HTML/CSS code, I am trying to target only level 1 "row" elements and not their nested counterparts. However, when using the child selector, it still selects the nested elements. How can I achieve selecting only level 1 "row" elements? ...

Switching from Vanilla JS to Vue.js, dealing with querySelector problems

Seeking assistance with transforming the following CodePen example to a Vue.js component: https://codepen.io/kjbrum/pen/qooQJJ While attempting to incorporate this.$nextTick for handling DOM manipulation, I'm encountering challenges in making it func ...

Transform JSON data into a Google Sheet using Google Apps Script

Having trouble inserting the JSON response into Google Sheet using Google Apps Script with the code below. Running into errors, even though I can't seem to pinpoint the issue. Take a look at the screenshot and code snippet provided: function myF ...

Why is it that when I use require.js, all my modules appear to be loading at once when the page first

During the development of my single-page backbone app using requirejs, I encountered an issue when deploying to our beta server. The initial page load took around 20 seconds as it had to fetch all the necessary scripts. I initially believed that this dela ...

JavaScript OOP Function call not functioning in IE9

When using IE9, a JavaScript OOP Function call does not seem to work for me. Here is my code snippet: var newobj = new SAObject(); <input onclick="newobj.function()" /> Upon clicking the button, nothing happens. No alert is displayed, and it seem ...

What is causing the inefficacy of this particular SQL request method, while the alternative one proves effective?

It's surprising that the one not working is from the mssql package page. Why isn't it functioning on my machine? What am I missing here? The other example I found online works perfectly. On a side note - should these requests be done asynchronou ...

Utilize Ajax to open and close an HTML tag within separate div elements

I am facing a challenge in my project where I have to dynamically open and close a form using ajax. The form needs to be opened within a div, and then closed in another div below it like the following: Opening form (header div) $('#header').h ...

Maintaining consistent row height in bootstrap when displaying or hiding a button

I'm currently working on a project utilizing AngularJS and Bootstrap to create a dynamic form. My goal is to have an 'edit' button display when a user hovers over a specific row of the form. However, I'm facing an issue where the row&ap ...

activating a button following the selection of a checkbox

My code includes a submit button that is currently disabled. I am looking to enable it when the user clicks on the "I agree" checkbox using jQuery. Can someone assist me with this? My code is written in HTML, JavaScript, and jQuery. <input id="agree" ...

Display HTML content retrieved from a string saved in a React database

I am currently in the process of creating a React page and facing a challenge with incorporating HTML content from a RTDB that has been styled using "use styles". Here is an example of the styling: import { makeStyles } from '@material-ui/core/style ...

The function res.sendFile() seems to be unresponsive

While building my server-side application using node.js, express, and request-promise, I encountered an issue with the res.sendFile() function in my server.js file. Despite including res.sendFile(__dirname + '/public/thanks.html'); within a .then ...

The HTML div is not aligned in the center even when using flexbox

After creating a list within a centered flex div, it seems that the list is not aligning properly. I used flex on the list-div2 and the translate rule in the parent's middle-text div, but it still doesn't look centered as expected. Can anyone p ...

The new FormData(form) method unexpectedly returns an empty object

In this scenario, I am aiming to retrieve key-value pairs. The form on my page looks like this: <form id="myForm" name="myForm"> <label for="username">Enter name:</label> <input type="text" id="username" name="username"> ...

The declaration file for module 'react/jsx-runtime' could not be located

While using material-ui in a react project with a typescript template, everything is functioning well. However, I have encountered an issue where multiple lines of code are showing red lines as the code renders. The error message being displayed is: Coul ...