Modify the value of a CSS property through JavaScript

Hey there, I'm wondering how to change a CSS value of the document itself, rather than targeting a specific element.

I've already looked into solutions like Change :hover CSS properties with JavaScript, but they all involve adding CSS rules. I also checked out https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle, but that seems to target specific elements as well...

What I'm looking for is a way to change a value that has been declared in the CSS file, kind of like an 'absolute value'.

One possible solution could be (for example, changing the color of the a tag) :

var sheet = document.getStyle();
sheet.getTagStyle('a').getProperty('color').setValue('rgb(0,0,0)');

(I believe the solution must involve using https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle, but I'm struggling to understand it.)

So, is it even possible to achieve this? And if so, how can it be done? (Please note: I'm specifically looking for a solution in JavaScript, not jQuery)

javascripthtmlcss

Answer №1

Loop through document.styleSheets, compare the .selectorText of each .cssRules to a specific selector, and then update the .style property accordingly. 

for (let {cssRules} of document.styleSheets) {
  let [{selectorText, style}] = cssRules;
  if (selectorText === "a") {
    style.color = "rgb(0, 0, 0)";
  }
}
a {
  color: rgb(122, 125, 22);
}
<a>123</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

Using JQuery and Ajax, what is the best way to transfer information from a popup form to a PHP page?

I've noticed that my question has been asked a few times already, but I'm still struggling to get my code working. It seems like I'm using the same code as those solutions, so I can't figure out what's going wrong. Currently, I am ...

phpjqueryhtmlajax

The elusive Yeoman composeWith module remains elusive and cannot be found

Feeling stuck on a coding problem. I've created a generator that contains other generators. When I install it from my local copy using npm link, composeWith works perfectly. But when I install the generator from GitHub, I encounter an error stating " ...

javascriptnode.jsnpmyeomannpm-install

What is the best method to prevent next.js components from overlapping one another?

I recently created a website using next.js and noticed an issue in my index.js file. There is a div that houses the main components of the site: class Page extends Component { render() { return ( <div className={styles.container}> ...

javascripthtmlreactjsnext.js

How is it possible that the form already comes with data filled in that I didn't input myself

I am currently working on a website using cakephp. Strangely, when I load the login form, both the username and password fields are already prefilled. The interesting part is that this information is not hardcoded anywhere in the form or controller files. ...

phphtmlcakephp

Hey there, what exactly does 'TypeError: Cannot access the 'scopedFn' property of an undefined object' mean?

Having trouble implementing RadListView with Nativescript-Vue. I am attempting to utilize a v-template for the header followed by another v-template for the list itself. 1) The header does not seem to be recognized, as only the standard v-template is disp ...

javascriptandroidvue.jsnativescriptnativescript-vue

Unable to recognize click event within the ng-click function

I need to identify when a click event occurs on an SVG element, specifically on a g element within the SVG element. Currently, I have created this JSFiddle The ng-click function is working properly, but unfortunately, the click event is not being detecte ...

javascriptjqueryangularjssvg

Adding a task to my database successfully through Postman integration

I'm having trouble implementing the code for my todo app using React. I am encountering an issue with adding a new todo to the database using the handleSubmit function. Oddly enough, it works fine when testing with Postman, but not when trying to inpu ...

javascriptnode.jsreactjsmongodbexpress

Retrieving the chosen option from a dropdown menu using AngularJS

<tr (click)="onRowClick(myDropDownList.value)"> <td> <select #myDropDownList (click)="$event.stopPropagation()" (change)="onChange($event.target.value)"> <option *ngFor="let n of numbers" [value]="n">{{n}}</option> </se ...

javascripthtmlangulartypescriptselect

Tips for efficiently utilizing AJAX requests in conjunction with PHP without duplicating code

I have a small script that utilizes AJAX and PHP to showcase an image. As you can see, by calling the mom() function, it searches the PHP file index.php?i=mom and displays the desired image. However, I am looking for a way to streamline the JavaScript cod ...

phpjavascriptajax

Issue: Unable to access 'filter' property of null object

I've been working on a small react dropdown task and it's running smoothly in Google Chrome. However, I encountered an error when testing it on MS Explorer. Even after deploying it on a live server, the issue persisted. The specific error message ...

javascriptreactjsfilterreact-hookstypeerror

Once invoked by an ajax request, the $().ready function is executed

The functionality of this code is flawless when running on its own. However, once I make an ajax call to it, the code fails to execute. I suspect that the issue lies within $().ready, but I haven't yet identified a suitable replacement. Any suggestio ...

javascriptjqueryajaxdocument-ready

Leveraging Vue.js to showcase API information through attribute binding

My application is designed to allow a user to select a Person, and then Vue makes an API call for that user's posts. Each post has its own set of comments sourced from here. You can view the codepen here Here is my HTML structure: <script src="h ...

javascriptvue.jsaxios

How can I obtain the model values for all cars in the primary object?

const vehicles={ vehicle1:{ brand:"Suzuki", model:565, price:1200 }, vehicle2:{ brand:"Hyundai", model:567, price:1300 }, vehicle3:{ brand:"Toyota", model ...

javascriptjsontypescriptobject

Mobile device causing issues with Bootstrap navbar toggler functionality

I am having an issue with my Bootstrap 5 navbar. It is not functioning properly on mobile devices. When I click the toggle button, nothing happens. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="contai ...

htmlcssbootstrap-5

Monitoring the content of a page with jQuery and adjusting the size as needed

Here is a code snippet: function adjustContainerHeight() { $('div#mainContainer').css({ 'min-height': $(document).height() - 104 // -104 compensates for a fixed header }).removeShadow().dropShadow({ 'blur&a ...

javascriptjqueryhtmlcss

Expanding the input focus to include the icon, allowing it to be clicked

Having trouble with my date picker component (v-date-picker) where I can't seem to get the icon, a Font Awesome Icon separate from the date-picker, to open the calendar on focus when clicked. I've attempted some solutions mentioned in this resour ...

csshtmlvue.jssass

Save the value of a promise in a variable for future use in state management within a React-Native application

let storage = AsyncStorage.getItem('@location_data').then(data => data) const MainApp = () => { let [currentLocation, setCurrentLocation] = useState(storage); The current situation is that the storage variable holds a promise. How can ...

javascriptreactjsreact-native

The transparency feature is malfunctioning in IE9 when using a background

This is a demonstration of a lightbox feature. You can find the code here. When you click on the link "Show Panel," a form will pop out. It works correctly in Firefox but not in IE9. The HTML code is simple: <body> <a id="show-panel" href="#"&g ...

jqueryhtmlcssinternet-explorerlightbox

Maintain a fixed element and enable the rest of the elements to scroll as the mobile browser address bar collapses while scrolling upwards

Currently facing a challenge where I want the background image to remain static while the address bar and content underneath scroll up. The image occupies 90% of the view height, and although I've prevented it from resizing and jumping when the addres ...

javascripthtmljquerycss

A unique approach to handling ngdisabled for fields that are required only

Starting off with a requirement to disable the submit button when a required field is left empty. <form name="form"> <input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" /><br/> ...

javascripthtmlangularjs