Get Document.Stylesheets by Name Instead of Index

get document.styleSheets by name instead of index?

Use this, and keep in mind:

For security reasons, Opera and
Mozilla will not allow you to access
the cssRules collection of a
stylesheet from another domain or
protocol. Attempting to access it will
throw a security violation error

function setStyleRule (selector, rule, sheetName) {
    var sheets = document.styleSheets,
        stylesheet = sheets[(sheets.length - 1)];
    
    for( var i in document.styleSheets ){
        if( sheets[i].href && sheets[i].href.indexOf(sheetName + ".css") > -1 ) {
            stylesheet = sheets[i];
            break;
        }
    }
    
    if( stylesheet.addRule )
        stylesheet.addRule(selector, rule);

    else if( stylesheet.insertRule )
        stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}

---

Update - shorter code:

function getSetStyleRule(sheetName, selector, rule) {
    var stylesheet = document.querySelector('link[href*=' + sheetName + ']')

    if( stylesheet ){
        stylesheet = stylesheet.sheet
        stylesheet.insertRule(selector + '{ ' + rule + '}', stylesheet.cssRules.length)
    }

    return stylesheet
}

// Usage example
getSetStyleRule('main', 'body', 'background:red')

Getting CSS file by ID to manipulate the properties

The object you'll get back for that id will be the link DOM element, not the stylesheet.

As far as I know, there's no way to assign a name to a stylesheet and then look it up by that name. Instead, you'll need to define a "marker rule" (unless you already have a nice unique rule you can look for), loop through the style sheet objects, and look for that rule to determine that you've found the right one.

Edit: Both MDC and MSDN say there's an href property on their CSSStyleSheet object / styleSheet object, which would be even better than a marker rule.

Edit 2: And it (the href) seems to work in IE, FF, Chrome, and Opera, although I'm getting duplicate entries for the specific stylesheet I tested with: http://jsbin.com/edaga3/2
(Off-topic: Also note that if you load a stylesheet from a different origin, your browser may prevent access to the rules.)

Is it possible to select stylesheet.cssRule[] with a class name or ID?

Unfortunately, there is no such method available. Specifically, the API only allows for deleting and inserting rules. On top of that, browsers may deny access to even that based on where the stylesheet originates.

Read more about it here:

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

Using JS, is it possible to return a list of all CSS stylesheets included in a page, when it loads?

If I am correct, by Names you mean the file name of each stylesheet.

Consider this example:

jQuery("link[href*='.css']").each(function(){
    console.log(jQuery(this).attr('href').split('/').pop());
});

Here I am using this link[href*='.css'] selector to select all (include the inactive) stylesheets.

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'));

JS - how to get content of internal style element (style.../style)

document.getElementsByTagName returns Array of Elements

so you need to access it with index

document.getElementsByTagName('style')[0].innerHTML

document.styleSheets is much useful if you want to get specific selector or modify something from style sheet

Example

var styleSheet = document.styleSheets[1]; 
// assuming second one is embedded style, 
// since document.styleSheets also shows linked style sheets (like <link heref=".. >)

for (var i = 0; i < styleSheet.rules.length; i++) {
    // if you are looking for selector '.main'
    if (styleSheet.rules[i].selectorText === '.main') {
        // get background color
        var oldBg = styleSheet.rules[i].style.backgroundColor;

        // set background color
        styleSheet.rules[i].style.backgroundColor = '#ddd';
    }    
}

---

Related Topics