Instructions on utilizing the CSSStyleSheet.insertRule() method for modifying a :root attribute

Is it possible to dynamically set the background color of the :root CSS property in an HTML file based on a hash present in the URL? The code provided does change the background color, but unfortunately, the hash value doesn't persist as users navigate between different pages on the site. One potential solution could be to use CSSStyleSheet.insertRule() to ensure that the CSS changes stay applied throughout the user's session, especially since all pages are using the same stylesheet. However, implementing this function correctly might require some additional guidance.

<script>
      if (window.location.hash) {
        document.documentElement.style.setProperty(
          '--main-bg-color',
          window.location.hash
        )
      }
</script>
javascripthtmlcssurl

Answer №1

This method has proven effective for me personally. While I have tested it on Chrome and Firefox, I cannot guarantee its functionality across all browsers:

<html>
<head>
<style>
:root { --main-bg-color: red }
body { background-color : var(--main-bg-color) }
</style>
<script>
  if (window.location.hash) {
    let hashValue = window.location.hash;
    let tagName = '--main-bg-color';
    document.documentElement.style.setProperty( tagName, hashValue);
    let newRule = ':root { ' + tagName + ':' + window.location.hash + ';}';
    let nextRoot = document.styleSheets[0].cssRules.length ;
    alert(tagName + ': ' + hashValue + "\n" + '#' + nextRoot + '  ' + newRule);
    document.styleSheets[0].insertRule (newRule, nextRoot)
}
</script>
</head>
<body>
    By using this code snippet, the background color will dynamically change based on the value present in the hash.
</body>
</html>

As of now, the recommended approach is to insert a new rule while ensuring that it holds the highest priority within the stylesheet. Alternatively, you can extract and modify the existing :root value.

In my exploration, I have not encountered any other JavaScript functions for manipulating CSS rules besides insertRule and removeRule. If there are additional methods available, they have eluded me thus far. Upon inspecting 

document.styleSheets[0].cssRules[0]
, only cssText was identified as relevant.

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

Modifying colors with Jquery

Is it possible to use CSS within JQuery to gradually change the color of a div? Additionally, how can I incorporate a second function into my <div>? Below is the code. I would like the color to revert back to its original state when the mouseout ev ...

jquerycss

Create a Bootstrap multi-bar component for visually displaying the daytime information

I am looking to create a horizontal bar with multiple intervals. Here is what I have tried so far: <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"& ...

htmlcssbootstrap-4

Implement a button transformation upon successful completion of a MySQLi update using AJAX

When displaying multiple database results with buttons that can be turned on or off inside a div, I am looking to implement AJAX to toggle the button state between ON and OFF upon clicking, and then update the button without refreshing or reloading the ent ...

javascriptphpjqueryajax

Displaying an automatic row using jQuery in real-time

I am struggling with displaying a default table row using jQuery. Specifically, I am using the remove() method to delete a table row, but I am unsure how to show a default row if there are no entries to display. Below is the code snippet in question: fu ...

jqueryhtml

Convert Time: segment time devoted to the main content from the time dedicated to advertisements

Can anyone assist me with solving a math problem? Let's consider two lists or arrays: Content Array 0-50 = C1 50-100 = C2 AD Array 10-20 = A1 30-60 = A2 80-140 = A3 The desired output should be: 0-10 = C1 10-20 = A1 20-30 = C1 30-60 = A2 60-80 = C ...

javascriptarraystypescript

ProgressMeterJS Plugin - Full-width Progress Bar

I have encountered a question regarding this particular plugin found at: My goal is to adjust the progress bar's width to 100% so it matches the width of its container. So far, I have made modifications to the plugin by changing the following line: ...

javascriptjquerypluginsprogress-bar

The syntax for importing JSON in JavaScript ES6 is incredibly straightforward and

Whenever I attempt to write my code following the ES6 standard and try to import a .json file, it ends up failing on me. import JsonT from "../../Data/t.json" //not functioning as expected var JsonT = require('../../Data/t.json'); //works fine ...

javascriptjsonreactjswebpack

Using CSS to automatically adjust the width of a child div based on its content, rather than stretching it to fill the entire

I'm currently facing an issue with my CSS. Apologies for the vague title, but I'll do my best to explain it here. My problem lies within a parent wrapper div that is centered on the page. Within this wrapper, there is another child div containing ...

javascriptjqueryhtmlcss

Dynamic content modal

Recently, I started exploring react native. In my application, there are 5 buttons on the screen. Each of them triggers the same <Modal>, but the content inside it changes based on the button clicked. For example, if I click the first button, a tex ...

javascriptreactjsreact-native

What is the process for aligning Item1 to the left and Item2 & Item3 to the right using MUI React?

I'm working on a component that contains three different Typography components. I need to align "summary" to the left, while 'miles' and 'duration' should be aligned to the right. https://i.stack.imgur.com/7e9sY.png Here's t ...

javascriptcssreactjsmaterial-ui

SyntaxError was not caught and an unexpected token export occurred at line 2371 in the popper.js file

I'm a beginner with bootstrap and jquery, and I'm attempting to utilize the datatables feature for sorting. However, when I run my code, I encounter the following error in the console: uncaught SyntaxError: Unexpected token export at popper.js:2 ...

javascriptasp.net-mvcdatatablesbootstrap-4popper.js

Preventing ElementNotVisibleException in Selenium WebDriver

Although I haven't delved into HTML extensively, I might not be entirely correct in what I'm about to discuss. As I was working on my Selenium code, I observed that certain buttons on specific webpages don't redirect to other pages but rath ...

pythonhtmlselenium

Mesh in threejs does not include the customDepthMaterial property when outputting to scene.toJSON

I have been working on creating an object with the following code: const geometry = new THREE.SphereBufferGeometry(2,100,100); const material = new THREE.MeshPhongMaterial({ map: myImage, transparent: true, side: THREE.DoubleSide, opacity: ...

javascriptthree.js

displaying error message after calling API on Node.js express server

I'm currently working on error handling on the front end, using responses from my Express server. The process involves sending data from the front end to the Express server via a POST request. The endpoint (referenced as /endpoint below) then communic ...

javascriptjqueryajaxexpressspotify

What is the reason for font names appearing yellow rather than blue in the "font-family" property?

Whenever I experiment with different font names, I notice that some fonts turn blue while others remain yellow. Can anyone clarify why this is happening? font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; ...

htmlcsssublimetext

unable to utilize references in React

import React, { Component } from "react"; class Learning extends Component { firstName = React.createRef(); handleSubmit = event => { event.preventDefault(); console.log(this.firstName.current.value); } ...

javascriptreactjs

Display fixed information in a separate tab using express and ejs

I have an Express app that is running smoothly with a MongoDB backend, and it's able to render tables with data flawlessly. However, I've encountered an issue when trying to export a table from my database. The exported table looks something like ...

javascriptjqueryhtmlnode.jsexpress

Troubleshoot: Why is my AngularJS bootstrap.ui modal failing to

I am experiencing an issue with displaying a modal dialog using AngularJS bootstrap.ui. After calling $modal.open(...), the screen grays out, the HTML from my templateUrl is fetched from the server, but the modal does not appear. When I click on the gray a ...

javascriptangularjstwitter-bootstrap

The use of `await` within a loop may not function as anticipated when the code is being run through Puppeteer, yet it functions flawlessly when executed in the browser's console

Currently, I am assessing the functionality of the codeToBeEvaluated function within a browser environment using puppeteer. Within codeToBeEvaluated, there is a while loop designed to trigger an alert (referenced as LINE B) every 10 seconds. The issue ari ...

javascriptnode.jsasync-awaitpuppeteer

Utilize a Java application to log in to a website automatically without the need to click on

Opening two websites in my application is a requirement. Both of these websites have login forms with the action set to POST method. My goal is to automatically redirect to the next page after logging into these websites when I access them through my proj ...

javajavascriptphpjqueryhtml