Posted in

Obtener el valor de una propiedad CSS

Para obterner el color, el background-color de cualquier clase declarada en nuestro CSS podemos usar la siguiente función:

function getStyleRuleValue(style, selector, sheet) {
            var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
            for (var i = 0, l = sheets.length; i < l; i++) {
                var sheet = sheets[i];
                if( !sheet.cssRules ) { continue; }
                for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
                    var rule = sheet.cssRules[j];
                    if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
                        return rule.style[style];
                    }
                }
            }
            return null;
        }

Ejemplo de uso:

alert(getStyleRuleValue('background-color', '.bg-pink', document.styleSheets[3])); // el tercer parámetro es opcional, si tenemos varias hojas CSS y la clase está en varias de ellas podemos indicar en cual buscar
// buscará en nuestro CSS la clase bg-pink y nos devolverá el valor de la propiedad background-color, que en este caso será #f76397 (rosa)

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *


The reCAPTCHA verification period has expired. Please reload the page.