Is there a way to update the :root css variable using jquery?
:root {
--color: #E72D2D;
}
.box-icon {
background-color: var(--color);
}
I tried but it doesn't seem to work
$("#blueColor").click(function(e) {
$(":root").css("--color", "#137581");
}
This code snippet makes the magic happen!
$("#blueColor").click(function(e) {
document.documentElement.style.setProperty('--color', "#137581");
});
Alternatively, you can use:
$("body").get(0).style.setProperty("--color", "#137581");
<!DOCTYPE html>
<html>
<head lang="ru">
<meta charset="UTF-8>
<title>qwabra</title>
<style>
* { color: var(--color, black); }
</style>
<style id="jqCSS"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
<script>
$(function(){
$("#jqCSS").html("");
function qwa(inch){
for (var i in inch ) {
$("#jqCSS").append(i+" {");
for (var j in inch[i] ) {
$("#jqCSS").append(j+":"+inch[i][j]+";");
};
$("#jqCSS").append("}");
};
};
qwa({ ":root":{"--color":"blue"} });
qwa({ "div":{ "--color": "green"} });
qwa({ "#alert":{ "--color": "red"}, "a":{ "text-decoration":"none" }, "a:hover":{ "text-decoration": "underline" } });
qwa({ "p":{ "background-color": "rgba(128, 128, 128, 0.44);","border": "solid 1px"} });
});
</script>
</head>
<body>
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
While I got red set directly on me!
<p>I’m red too, because of inheritance!</p>
<a href="#">href</a>
</div>
</body>
</html>By using CSS variables, I've devised this script that allows me to manipulate the hue and saturation of a color by adjusting the H and S variables in an HSL format through jQuery.
CSS:
:root {
--H: 90;
--S: 90%;
--Main: hsl( var(--H) var(--S) 50%);
}
HTML:
<button onclick="color1()">Color #1</button>
Jquery
function color1(){$(':root').css("--H","250").css("--S","50%")};
I am facing a challenge with two form components that share a common JS validator. import { validateInput } from './validateInput.js' export default { data () { return { email: '<a href="/cdn-cgi/l/email-protection" class="_ ...
Currently, I'm utilizing AJAX to execute a server call, and I've noticed that the behavior of my function varies depending on its origin. Below is an excerpt of the code that's causing confusion: <html> <body> <script> ...
I'm on the hunt for a clever solution to a rather ugly problem. I have a form that accepts a full name as input and passes it to a function. Now, I need to transform that full name into its initials (e.g. 'John Doe' becomes 'JD') b ...
Even after reading numerous blogs and forums, I'm still unable to get this working. My goal is to allow users to personalize their user account style sheet. I made sure to include <?php header("Content-type: text/css"); ?> at the beginning of t ...
My canvas-like element is constantly changing its contents. I am attempting to execute a function on each change that captures the current content and adds it to another element, creating a history of all changes. window.updateHistory = func ...
Each user on my website has a profile tab that displays their submitted posts. To showcase these posts, I utilize the following code: <?php while ($ultimatemember->shortcodes->loop->have_posts()) { $ultimatemember->shortcodes->loop-> ...
I'm really struggling to solve this issue. I have two arrays - one for cars and the other for active filters. The cars array consists of HTML li tags with attributes like car type, number of seats, price, etc. On the other hand, the active_filters arr ...
My goal is to create a variable within a loop: box-shadow: 835px 1456px #FFF, 1272px 796px #FFF, 574px 1357px #FFFand so on... The concept is simple: box-shadow: x1 y1 #fff, x2 y2 #fff, x3 y3 #fff, x4 y4 #fff ... xn yn #fff. I attempted to achieve this ...
I recently created a div that looks like this <div id="hidden"> <img src="photos/Close-2-icon.png" width="16" height="16"> <input id="add" value="Add field" type="button" > <input type='button' id=&a ...
Seeking assistance with my Javascript code, which is designed to extract weather data from NOAA xml files (obtained from this link: ). Currently, I have included a snippet of the XML as a string: var xmlDoc = $.parseXML("<data>\ <weather tim ...
I need help running a random function, but I'm struggling to get it right. Here's what I have so far: <script> function randomFrom(array) { return array[Math.floor(Math.random() * array.length)]; } function randomchords(){ randomFrom ...
I'm encountering issues with the alignment of titles and text using the 'Lato' Google font. It seems like there is a space or kerning issue on the first letter causing them not to align properly to the left. Any suggestions on how to fix thi ...
I am currently working on dynamically setting the heights of elements with a specific class using JQuery in order to achieve a 16:10 ratio based on their width. However, I'm encountering an issue where the height doesn't seem to be applied and re ...
I'm encountering an issue with Material UI grid. Whenever I increase the spacing above 0, the Grid does not fit the screen properly and a bottom slider is visible, allowing me to move the page horizontally slightly. Here is the simplified code snippe ...
Currently, I am experimenting with an HTML5 canvas element. A major concern of mine is setting up a mousemove event to monitor the movement of the mouse over the canvas for drawing and other purposes. Unfortunately, I have not been able to locate a definit ...
After gaining experience working with rails applications for a few months, I have been tasked with adding a feature that displays a welcome message to users visiting the site home page for the first time, but not on subsequent visits or page reloads. What ...
Whenever I attempt to click on the video link, it seems to shift over to the left side of the page. The link is positioned in the center and I would prefer for the video to open up at the same central location. However, it consistently opens up on the left ...
We are in the process of developing a client-based application using HTML5 and indexedDB on Firefox 28. When large amounts of data are loaded to Firefox for the first time using AJAX requests in JSON format, each JSON response is approximately 2MB (gzipped ...
I need to incorporate a grid of 16x16 or 64x64 into my layout without it overflowing. I'm considering using flexbox, but unsure of the implementation process. My goal is to have the grid resize based on the container size rather than exceeding its bou ...
As a newcomer to Jquery and Json, I am struggling with binding a JSON object from a RESTful Webservice written in WCF to jqGrid. Despite saving the JSON object as a static file and attempting to bind it to the grid, I realized that the issue does not lie w ...