How to Read CSS Rule Values With JavaScript

How do you read CSS rule values with JavaScript?

Adapted from here, building on scunliffe's answer:

function getStyle(className) {
    var cssText = "";
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {        
        if (classes[x].selectorText == className) {
            cssText += classes[x].cssText || classes[x].style.cssText;
        }         
    }
    return cssText;
}

alert(getStyle('.test'));

Read CSS property of an element using JavaScript

You have got two options:

1. Manually enumerating and parsing the document.styleSheets object (not recommended, unless you want to get all specific style properties defined by a certain selector).
2. Create an element matching the selector, and use the getComputedStyle or currentStyle (IE) method to get the property value.

In your example, attempt to get a certain property (let's say: color) of a div with class="layout":

function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE
}
window.onload = function(){
    var d = document.createElement("div"); //Create div
    d.className = "layout";                //Set class = "layout"
    alert(getStyleProp(d, "color"));       //Get property value
}

Regarding comment at your question, another function:

The function below will ignore inline style definitions of the current element. If you want to know the style definitions inherited from a stylesheet (without inherited style definitions of the parent elements), traverse the tree, and temporary wipe the .cssText property, as shown in the funcion below:

function getNonInlineStyle(elem, prop){
    var style = elem.cssText; //Cache the inline style
    elem.cssText = "";        //Remove all inline styles
    var inheritedPropValue = getStyle(elem, prop); //Get inherited value
    elem.cssText = style;     //Add the inline style back
    return inheritedPropValue;
}

How to dynamically modify CSS rule set (e.g. with a class selector) from JavaScript within Firefox Add-on using XUL, SDK or WebExtensions techniques?

5) There's things like document.styleSheets which doesn't seem to get what I want (unless I am mistaken?). Everything seems read-only.

This is the correct option. While the styleSheets property is read-only (meaning you can't assign like this: document.styleSheets = val), the stylesheet object you get does allow modifications.

Since you only care about one (modern!) browser, this is easier than Changing a CSS rule-set from Javascript in a cross-browser way. A trivial example:

function changeCSS() {  let myClassRule = document.styleSheets[0].cssRules[0];  if (myClassRule.style.color == "red")    myClassRule.style.color = "blue";  else    myClassRule.style.color = "red";}

.my-class {  color: red;}

<p class="my-class">First paragraph</p><p class="my-class">Second paragraph</p><button onclick="changeCSS()">Change the stylesheet!</button>