What is the method for altering the background color with JavaScript in CSS?

I need assistance with changing the background color using JavaScript. Specifically, I want to change the color of the background property that is located within .diagnosis-kit-inner .nav-tabs .nav-item.active:after. Can someone provide guidance on this? Thank you.

function modifyColor() {
  var targetElement = document.querySelector(".diagnosis-kit-inner .nav-tabs .nav-item.active:after");

  targetElement.style.backgroundColor = 'blue';
}
.diagnosis-kit-inner .nav-tabs .nav-item.active:after {
  background-color: white;
}
<div class="diagnosis-kit-inner ">
  <ul class="nav-tabs">
    <li class="nav-item">
    </li>
  </ul>
</div>
<a href="#" onclick="modifyColor()">Change Color</a>

javascriptcss

Answer №1

You can't directly modify the style of a pseudo-selector, but you can utilize a var() for the background color and set a default value at the document's :root.

To override this, you can use JavaScript to call setProperty on the style of the documentElement.

This idea was inspired by the answer found here: Changing CSS pseudo-element styles via JavaScript

function updateActiveColor() {
  document.documentElement.style.setProperty('--nav-item-active-bg', 'blue');
}
:root {
  --nav-item-active-bg: white;
}

.diagnosis-kit-inner .nav-tabs .nav-item.active:after {
  color: #CCC;
  content: 'Active';
  padding: 0.25em;
  background-color: var(--nav-item-active-bg); /* Dynamic var prop */
}
<div class="diagnosis-kit-inner">
  <ul class="nav-tabs">
    <li class="nav-item active"></li>
  </ul>
</div>
<a href="#" onclick="updateActiveColor()">Change Color</a>

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

Utilizing jQuery.post to generate a dynamic dropdown menu

I recently designed a dropdown list that functions well on a standalone page. However, I encountered an issue when attempting to display it in a table on another page using jQuery.post(). The contents appear to overflow from the dropdown list. The jQuery ...

phpjavascriptjquery

Maintain the cache in internet browsers

Despite my efforts to prevent browser caching, the URLs of my applications are still being stored in cache. I have implemented the following code in the page load method of my master page to disable browser cache: Response.Cache.SetCacheability(HttpCachea ...

javascriptasp.netcachingwebforms

Consecutive pair of XMLHttpRequest requests

Is it possible to create a functionality where the page index.php sends a Javascript variable called idToken, which is then received in another page called token.php using Javascript as well? In the token.php page, there will be more code that processes ...

javascriptphpajax

Utilizing a separator to individually display each item within a string

How can I print out each element of a string separately without including the last element? var animals = "bear, lion, tiger, jaguar"; $.each(animals.split(",").slice(0,-1), function(index, item) { console.log(item); }); p.s. I want to a ...

javascriptjquery

Trigger a keyframe animation upon initial click and then reverse playback on the subsequent click

I'm struggling to create a wave animation that fills the screen up to a certain point and stops on the first click of a navigation menu. I've attempted to have it play in reverse when the navigation menu is clicked again, but it's not workin ...

javascriptjqueryhtmlcss-animations

Configuring the space beneath a multi-line text with a bottom border distance or shadow

I am looking to add a bottom border with less spacing than default for specific text, creating a look similar to this image: https://i.sstatic.net/sCQii.png Unfortunately, it seems the border property cannot achieve this effect. I am experimenting with t ...

htmlcss

Unable to retrieve values from JSON objects within an array

My array consists of multiple objects, each containing specific properties such as: [ { "id":17368, "creationDate":1566802693000, "status":"InProgress", "type":"NEW", "agentType":"Master" }, { "id":17368, ...

javascriptarraysreactjs

Utilize Vue.js and express.js to distribute HTML files securely

Currently, my tech stack includes Vue.js for the frontend and Express.js for the backend. When I kick off the express.js server using npm start, my goal is to serve the Vue frontend component. By utilizing the Vue generator and Express generator, I attemp ...

javascripthtmlnode.jsexpressvue.js

Trigger an Ajax request upon user confirmation, which will only be prompted based on the result of a previous Ajax call

Currently, I am facing a challenging issue surrounding asynchronous calls: A specific JQuery function is triggered on user click. This function then requests a PHP file to check if the user input overlaps with existing information in the database. If an o ...

javascriptjqueryajax

I am encountering difficulty loading a .gltf file for use with Three.js on my React website

I uploaded my .gltf file of a 3D model to the public folder of my project and then ran the command "npx gltfjsx filename" to convert it into a .js React component. Within that .js file, I included the following line: const { nodes, materials } = useGLTF(&a ...

javascripthtmlreactjsthree.jslocalhost

Issue: App is not being styled with Material UI Theme Colors

I'm having trouble changing the primary and secondary colors of Material UI. Even after setting the colors in the theme, the controls like Buttons or Fabs still use the default colors. Can someone help me figure out what I'm missing? index.js /* ...

javascriptreactjsmaterial-ui

Could it be that I am not effectively utilizing and integrating readable streams in a clear and efficient manner?

This program is designed to read data from a text file named 'IN.txt' and write it to a new file called 'copy.json' in JSON format. Each line of the text file contains words separated by tabs, which are then split into an array. Afte ...

javascriptnode.jsstream

Incorporate Third-Party Plugins with Angular

I am interested in integrating 3rd party JavaScript plugins such as Typed.js, AOS.js, mo.js, and more into my application. However, I am still trying to understand the proper way to utilize these plugins effectively. Despite some of them having good docume ...

javascriptangular

What is the best way to create an express route for a delayed string response that is loaded only after an API call promise is fulfilled?

app.get(`/${sumName}`, async (req, res) => { const link = `https://na1.api.riotgames.com/lol/league/v4/challengerleagues/by-queue/RANKED_SOLO_5x5?api_key=${RiotKey}` const response = await fetch(link); let data = await response.j ...

javascriptnode.jsexpress

The updating of Angular 2 CLI variables does not occur

As a complete newcomer to Angular 2, I recently attempted to start my first project using the Angular CLI. Unfortunately, I encountered some issues. It seems that the variables in my views are not updating as expected. I followed the typical steps: ng n ...

javascriptnode.jsangularangular-cli

Utilizing AJAX and PHP to refresh information in the database

For my project, I need to change the data in my database's tinyint column to 1 if a checkbox is selected and 0 if it is deselected. This is the Javascript/Ajax code I have written: <script> function updateDatabaseWithCheckboxValue(chk,address) ...

javascriptphpjqueryajax

An issue arises even with the proper configuration in place: "SessionNotCreatedError: session cannot be established as Chrome version needs to fall within the range of 70 to 73."

During my automated testing with selenium-webdriver, I encountered an issue while building a driver using chromedriver. Everything was functioning perfectly until one day, when I ran a test and received the following error message: SessionNotCreatedErro ...

javascriptselenium-webdrivernpmwebdriverselenium-chromedriver

Ways to swap out an img element with an almost identical gif element while maintaining its precise placement consistently

I am facing an issue in my code where a random element is generated within the body and when clicked, it is replaced with another gif element. I am using offset() to obtain the top and left values of the original image, and then using replaceWith() to swap ...

javascriptjqueryhtmlcssgif

Cannot rearrange Font Awesome Icon

Having some trouble positioning my reply icon from Font Awesome next to my heart icon. No matter what I try, it ends up stuck in the corner of my div. I've experimented with various methods like vertical-align: middle but nothing seems to work in my c ...

jqueryhtmlcssnode.jsejs

The AngularJs 2 framework encountered an issue with booting up after attempting to combine all TypeScript files into a single JavaScript file

I am currently utilizing Angular 2 with TypeScript (V-1.8) in my project setup. I have configured my tsconfig to output the code into a single .js file. This single.js file includes the necessary code to bootstrap the application, as the boot.ts file is al ...

javascriptangularjsangulartsconfigtypescript1.8