Getting Values of Global Stylesheet in Jquery

Getting values of global stylesheet in jQuery

When you need the exact value as defined in the global stylesheet you have to access the rules within the style-element.

This is not implemented in jQuery.

IE: rules-collection

Others: CSSRuleList (May be supported by IE8 or 9 too, can't tell you exactly)

Is it possible to change CSS Variables globally via jQuery?

Since the variable is a global, you can set it anywhere in a style and the value will be updated.

$("div").click(function() {
    this.setAttribute("style", "--text_color: rgb(255, 255, 255);");
});

However, I would suggest you don't modify the global variable but to update a class name instead. Have a list off root variables and use different values in different classes:

:root {
    --text-color1: rgb(0, 0, 255);
    --text-color2: rgb(0, 255, 255);
}
.class1 {
    color: var(--text-color1);
}
.class2 {
    color: var(--text-color1);
}

Now you can change the class name on click:

$("div").click(function() {
   this.className = "class2";
});

can jquery manipulate the global css definition of the document?

I would probably handle this by having your checkbox add and remove a class form the <body> element:

$('body').toggleClass('hideABC');

And have the following CSS:

body.hideABC div.abc { display:none; }
body div.abc { display:block; }

So, if elsewhere in your page a <div> gets the '.abc' class added to it, then it will take on the first CSS rule and be hidden.

Define global CSS classes using JavaScript or jQuery?

Pure javascript -

var style=document.createElement('style');
style.type='text/css';
if(style.styleSheet){
    style.styleSheet.cssText='your css styles';
}else{
    style.appendChild(document.createTextNode('your css styles'));
}
document.getElementsByTagName('head')[0].appendChild(style);

Get a CSS value from external style sheet with Javascript/jQuery

With jQuery:

// Scoping function just to avoid creating a global(function() {    var $p = $("<p></p>").hide().appendTo("body");    console.log($p.css("color"));    $p.remove();})();

p {color: blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

get CSS rule's percentage value in jQuery

There's no built-in way, I'm afraid. You can do something like this:

var width = ( 100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';

How can I get the inherited CSS value using Javascript?

There's no way to get the percentage value I'm afraid. You can try something like this:

var widthpx = getComputedStyle($('#mydiv')[0]).width;
var parentWidth = $('#mydiv').parent().css('width')

var width = ( 100 * parseFloat(widthpx) / parseFloat(parentWidth) ) + '%';

Accessing a CSS custom property (aka CSS variable) through JavaScript

You can use document.body.style.setProperty('--name', value);:

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get

document.body.style.setProperty('--foo-bar', newValue);//set

Getting Values of Global Stylesheet in Jquery