CSS kural değerlerini JavaScript ile nasıl okuyorsunuz?

116

Satır içi stilde gördüğünüz format gibi bir CSS kuralının tüm içeriğini içeren bir dize döndürmek istiyorum. Bunu, belirli bir kuralda neyin bulunduğunu bilmeden yapabilmek istiyorum, bu yüzden onları sadece stil adına göre (gibi .style.width) çıkaramam .

CSS:

.test {
    width:80px;
    height:50px;
    background-color:#808080;
}

Şimdiye kadarki kod:

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {
        if(classes[x].selectorText==className) {
            //this is where I can collect the style information, but how?
        }
    }
}
getStyle('.test')
javascript  html  css 
— Diyot - James MacFarlane
kaynak
lütfen bunu da kontrol edin. stackoverflow.com/questions/53592919/…
— Mithilesh Kumar

Yanıtlar:

91

Scunliffe'in cevabına dayanarak buradan uyarlanmıştır :

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'));
— nsdel
kaynak
11
ClassName'in CSS dosyasında kullanılan seçiciyle tam olarak eşleşmesi gerektiğini unutmayın. Örneğin, bir stil ".article a, makale a: hover {color: #ccc;}" gibi tanımlanmışsa getStyle (". Article a") hiçbir şey bulamayacaktır.
— Vilius Paulauskas
1
Bu Chrome'da çalışmıyor, ancak firefox'ta çalışıyor, sorun ne olabilir?
— Johnydep
13
birden fazla stil sayfası varsa, bunların arasında da döngü yapmanız gerekecektir. for (var i = 0; i <document.styleSheets.length; i ++) {var s = document.styleSheets [i];}
— surya
@surya Uyarlanmış tam çalışma çözümü için cevabımı görün
— dostum
2
@Johnydep Chrome'da var classesolmalıdır document.styleSheets[0].rules[0].cssRules. Bu, cevaptaki şime (yaratıcı bir şekilde) eklenebilir.
— Henrik Christensen
23

"Nsdel" den kabul edilen yanıt bir belgede yalnızca bir stil sayfasıyla mevcut olduğundan, bu uyarlanmış tam çalışma çözümüdür:

    /**
     * Gets styles by a classname
     * 
     * @notice The className must be 1:1 the same as in the CSS
     * @param string className_
     */
    function getStyle(className_) {

        var styleSheets = window.document.styleSheets;
        var styleSheetsLength = styleSheets.length;
        for(var i = 0; i < styleSheetsLength; i++){
            var classes = styleSheets[i].rules || styleSheets[i].cssRules;
            if (!classes)
                continue;
            var classesLength = classes.length;
            for (var x = 0; x < classesLength; x++) {
                if (classes[x].selectorText == className_) {
                    var ret;
                    if(classes[x].cssText){
                        ret = classes[x].cssText;
                    } else {
                        ret = classes[x].style.cssText;
                    }
                    if(ret.indexOf(classes[x].selectorText) == -1){
                        ret = classes[x].selectorText + "{" + ret + "}";
                    }
                    return ret;
                }
            }
        }

    }

Uyarı: Seçici, CSS'deki ile aynı olmalıdır.

— kanka
kaynak
global_sadece pencere nesnesi için bir takma addır. Kod parçacığını düzenledim. Şimdi çalışmalı
— ahbap
3
bir biçembentte kural veya cssRules yoksa (bu olabilir!) kodunuz başarısız olursa ekleyin if (! sınıflar) devam eder; var sınıflardan sonra = styleSheets [i] .kurallar || stil sayfaları [i] .cssRules; var classesLength = classes.length; düzenlememi gör
— kofifus
1
çalışır, ancak dizge yerine bir nesne döndürmelidir
— brauliobo
@kofifus Yaklaşımınız eklendi
— dostum
Bunun GC sürüm 64.0'dan beri çalışmadığını unutmayın: stackoverflow.com/questions/48753691/…
— Shalev Levi
18

ÇÖZÜM 1 (ÇAPRAZ TARAYICI)

function GetProperty(classOrId,property)
{ 
    var FirstChar = classOrId.charAt(0);  var Remaining= classOrId.substring(1);
    var elem = (FirstChar =='#') ?  document.getElementById(Remaining) : document.getElementsByClassName(Remaining)[0];
    return window.getComputedStyle(elem,null).getPropertyValue(property);
}

alert( GetProperty(".my_site_title","position") ) ;

ÇÖZÜM 2 (ÇAPRAZ TARAYICI)

function GetStyle(CLASSname) 
{
    var styleSheets = document.styleSheets;
    var styleSheetsLength = styleSheets.length;
    for(var i = 0; i < styleSheetsLength; i++){
        if (styleSheets[i].rules ) { var classes = styleSheets[i].rules; }
        else { 
            try {  if(!styleSheets[i].cssRules) {continue;} } 
            //Note that SecurityError exception is specific to Firefox.
            catch(e) { if(e.name == 'SecurityError') { console.log("SecurityError. Cant readd: "+ styleSheets[i].href);  continue; }}
            var classes = styleSheets[i].cssRules ;
        }
        for (var x = 0; x < classes.length; x++) {
            if (classes[x].selectorText == CLASSname) {
                var ret = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText ;
                if(ret.indexOf(classes[x].selectorText) == -1){ret = classes[x].selectorText + "{" + ret + "}";}
                return ret;
            }
        }
    }
}

alert( GetStyle('.my_site_title') );
— T.Todua
kaynak
6

Dikkat edilmesi gereken bazı tarayıcı farklılıkları:

CSS verildiğinde:

div#a { ... }
div#b, div#c { ... }

ve InsDel'in örneği verildiğinde, sınıflar FF'de 2, IE7'de 3 sınıfa sahip olacaktır .

Örneğim bunu gösteriyor:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style>
    div#a { }
    div#b, div#c { }
    </style>
    <script>
    function PrintRules() {
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules
        for(var x=0;x<rules.length;x++) {
            document.getElementById("rules").innerHTML += rules[x].selectorText + "<br />";
        }
    }
    </script>
</head>
<body>
    <input onclick="PrintRules()" type="button" value="Print Rules" /><br />
    RULES:
    <div id="rules"></div>
</body>
</html>
— Larsenal
kaynak
4

İşte bir sayfadaki tüm kuralları yinelemek için kod:

function iterateCSS(f) {
  for (const styleSheet of window.document.styleSheets) {
    const classes = styleSheet.rules || styleSheet.cssRules;
    if (!classes) continue;

    for (const cssRule of classes) {
      if (cssRule.type !== 1 || !cssRule.style) continue;
      const selector = cssRule.selectorText, style=cssRule.style;
      if (!selector || !style.cssText) continue;
      for (let i=0; i<style.length; i++) {
        const propertyName=style.item(i);
        if (f(selector, propertyName, style.getPropertyValue(propertyName), style.getPropertyPriority(propertyName), cssRule)===false) return;
      }
    }
  }
}

iterateCSS( (selector, propertyName, propertyValue, propertyPriority, cssRule) => {
  console.log(selector+' { '+propertyName+': '+propertyValue+(propertyPriority==='important' ? ' !important' : '')+' }');
});
Snippet'i genişlet

— kofifus
kaynak
2 
function getStyle(className) {
    document.styleSheets.item("menu").cssRules.item(className).cssText;
}
getStyle('.test')

Not: "menü", CSS'yi uyguladığınız bir öğe kimliğidir. "className" metnini almamız gereken bir css sınıf adı.

— sivaprakasht
kaynak
Bunun işe yaradığına emin misin? (AFAIK itemyöntemi, bir sınıfAdı değil, bir tamsayı dizini alır).
— Julien Kronegg
complete nonsense
— tnt-rox
2

Gerçekten işe yarayacak hiçbir öneriyi bulamadım. İşte sınıfları bulurken aralığı normalleştiren daha sağlam bir tane.

//Inside closure so that the inner functions don't need regeneration on every call.
const getCssClasses = (function () {
    function normalize(str) {
        if (!str)  return '';
        str = String(str).replace(/\s*([>~+])\s*/g, ' $1 ');  //Normalize symbol spacing.
        return str.replace(/(\s+)/g, ' ').trim();           //Normalize whitespace
    }
    function split(str, on) {               //Split, Trim, and remove empty elements
        return str.split(on).map(x => x.trim()).filter(x => x);
    }
    function containsAny(selText, ors) {
        return selText ? ors.some(x => selText.indexOf(x) >= 0) : false;
    }
    return function (selector) {
        const logicalORs = split(normalize(selector), ',');
        const sheets = Array.from(window.document.styleSheets);
        const ruleArrays = sheets.map((x) => Array.from(x.rules || x.cssRules || []));
        const allRules = ruleArrays.reduce((all, x) => all.concat(x), []);
        return allRules.filter((x) => containsAny(normalize(x.selectorText), logicalORs));
    };
})();

İşte Chrome konsolundan iş başında.

görüntü açıklamasını buraya girin

— Derek Ziemba
kaynak
1
Bu, bu sayfadaki tüm cevapların mekanıdır. Bunun
— github'da
Bu IE11'de çalışmaz, çünkü sağlanan sözdizimiyle Array.map () desteklenmez. Bunu eski işleve () değiştirmeyi öneririm {return xxx; } daha iyi uyumluluk için sözdizimi. Aksi takdirde, harika cevap!
— Demonblack
1
Bunu IE11 ile çalışacak şekilde değiştirdim (örneğin ES5). İşte ihtiyacınız olan her şeyi içeren bir JSFiddle: jsfiddle.net/xp5r8961
— Demonblack
1

Bu sayfa için gereksiz stilleri gösteren benzer bir yardımcı işlev yaptım. <div>Kullanılmayan tüm stilleri listeleyen gövdeye bir ekler .

(firebug konsoluyla kullanılmak üzere)

(function getStyles(){var CSSrules,allRules,CSSSheets, unNeeded, currentRule;
CSSSheets=document.styleSheets;

for(j=0;j<CSSSheets.length;j++){
for(i=0;i<CSSSheets[j].cssRules.length;i++){
    currentRule = CSSSheets[j].cssRules[i].selectorText;

    if(!document.querySelectorAll(currentRule).length){ 
       unNeeded+=CSSSheets[j].cssRules[i].cssText+"<br>"; 
  }       
 }
}

docBody=document.getElementsByTagName("body")[0];
allRulesContainer=document.createElement("div");
docBody.appendChild(allRulesContainer);
allRulesContainer.innerHTML=unNeeded+isHover;
return false
})()
— adardesign
kaynak
1

Daha eksiksiz bir sonuç elde etmek için julmot'un cevabını uyarladık. Bu yöntem, sınıfın seçicinin parçası olduğu stilleri de döndürür.

//Get all styles where the provided class is involved
//Input parameters should be css selector such as .myClass or #m
//returned as an array of tuples {selectorText:"", styleDefinition:""}
function getStyleWithCSSSelector(cssSelector) {
    var styleSheets = window.document.styleSheets;
    var styleSheetsLength = styleSheets.length;
    var arStylesWithCSSSelector = [];

    //in order to not find class which has the current name as prefix
    var arValidCharsAfterCssSelector = [" ", ".", ",", "#",">","+",":","["];

    //loop through all the stylessheets in the bor
    for(var i = 0; i < styleSheetsLength; i++){
        var classes = styleSheets[i].rules || styleSheets[i].cssRules;
        var classesLength = classes.length;
        for (var x = 0; x < classesLength; x++) {
            //check for any reference to the class in the selector string
            if(typeof classes[x].selectorText != "undefined"){
                var matchClass = false;

                if(classes[x].selectorText === cssSelector){//exact match
                    matchClass=true;
                }else {//check for it as part of the selector string
                    //TODO: Optimize with regexp
                    for (var j=0;j<arValidCharsAfterCssSelector.length; j++){
                        var cssSelectorWithNextChar = cssSelector+ arValidCharsAfterCssSelector[j];

                        if(classes[x].selectorText.indexOf(cssSelectorWithNextChar)!=-1){
                            matchClass=true;
                            //break out of for-loop
                            break;
                        }
                    }
                }

                if(matchClass === true){
                    //console.log("Found "+ cssSelectorWithNextChar + " in css class definition " + classes[x].selectorText);
                    var styleDefinition;
                    if(classes[x].cssText){
                        styleDefinition = classes[x].cssText;
                    } else {
                        styleDefinition = classes[x].style.cssText;
                    }
                    if(styleDefinition.indexOf(classes[x].selectorText) == -1){
                        styleDefinition = classes[x].selectorText + "{" + styleDefinition + "}";
                    }
                    arStylesWithCSSSelector.push({"selectorText":classes[x].selectorText, "styleDefinition":styleDefinition});
                }
            }
        }
    }
    if(arStylesWithCSSSelector.length==0) {
        return null;
    }else {
        return arStylesWithCSSSelector;    
    }
}

Ek olarak, sağladığınız bir kök düğümün alt ağacına css stil tanımlarını toplayan bir işlev yaptım (bir jquery seçici aracılığıyla). 

function getAllCSSClassDefinitionsForSubtree(selectorOfRootElement){
    //stack in which elements are pushed and poped from
    var arStackElements = [];
    //dictionary for checking already added css class definitions
    var existingClassDefinitions = {}

    //use jquery for selecting root element
    var rootElement = $(selectorOfRootElement)[0];
    //string with the complete CSS output
    var cssString = "";

    console.log("Fetching all classes used in sub tree of " +selectorOfRootElement);
    arStackElements.push(rootElement);
    var currentElement;

    while(currentElement = arStackElements.pop()){
        currentElement = $(currentElement);
        console.log("Processing element " + currentElement.attr("id"));

        //Look at class attribute of element 
        var classesString = currentElement.attr("class");
        if(typeof classesString != 'undefined'){
            var arClasses = classesString.split(" ");

            //for each class in the current element
            for(var i=0; i< arClasses.length; i++){

                //fetch the CSS Styles for a single class. Need to append the . char to indicate its a class
                var arStylesWithCSSSelector = getStyleWithCSSSelector("."+arClasses[i]);
                console.log("Processing class "+ arClasses[i]);

                if(arStylesWithCSSSelector != null){
                    //console.log("Found "+ arStylesWithCSSSelector.length + " CSS style definitions for class " +arClasses[i]);
                    //append all found styles to the cssString
                    for(var j=0; j< arStylesWithCSSSelector.length; j++){
                        var tupleStyleWithCSSSelector = arStylesWithCSSSelector[j];

                        //check if it has already been added
                        if(typeof existingClassDefinitions[tupleStyleWithCSSSelector.selectorText] === "undefined"){
                            //console.log("Adding " + tupleStyleWithCSSSelector.styleDefinition);
                            cssString+= tupleStyleWithCSSSelector.styleDefinition;
                            existingClassDefinitions[tupleStyleWithCSSSelector.selectorText] = true;
                        }else {
                            //console.log("Already added " + tupleStyleWithCSSSelector.styleDefinition);
                        }
                    }
                }
            }
        }
        //push all child elments to stack
        if(currentElement.children().length>0){
            arStackElements= arStackElements.concat(currentElement.children().toArray());
        }
    }

    console.log("Found " + Object.keys(existingClassDefinitions).length + " CSS class definitions");
    return cssString;
}

Bir sınıf aynı seçici ile birkaç kez tanımlanırsa, yukarıdaki işlevin yalnızca ilkini alacağını unutmayın. Örnekte jQuery kullanıldığına dikkat edin (ancak cab, kullanmamak için nispeten kolayca yeniden yazılabilir)

— dparnas
kaynak
1
jquery olmayan bir çözüme (ve bir jsfiddle ..) sahip olmak harika olurdu
— kofifus
0

// IE'de çalışıyor, diğer tarayıcılardan emin değil ...

alert(classes[x].style.cssText);
— scunliffe
kaynak
0

Bu sürüm, bir sayfadaki tüm stil sayfalarından geçecektir. İhtiyaçlarım için, stiller genellikle 20+ stil sayfasının 2. ila sonuncusundaydı, bu yüzden onları geriye doğru kontrol ediyorum.

    var getStyle = function(className){
        var x, sheets,classes;
        for( sheets=document.styleSheets.length-1; sheets>=0; sheets-- ){
            classes = document.styleSheets[sheets].rules || document.styleSheets[sheets].cssRules;
            for(x=0;x<classes.length;x++) {
                if(classes[x].selectorText===className) {
                    return  (classes[x].cssText ? classes[x].cssText : classes[x].style.cssText);
                }
            }
        }
        return false;
    };
— grigb
kaynak
0

Özelliklerin stil / değerlerin ayrıştırıldığı nesnenin dönüşünü ekledim:

var getClassStyle = function(className){
    var x, sheets,classes;
    for( sheets=document.styleSheets.length-1; sheets>=0; sheets-- ){
        classes = document.styleSheets[sheets].rules || document.styleSheets[sheets].cssRules;
        for(x=0;x<classes.length;x++) {
            if(classes[x].selectorText===className){
                classStyleTxt = (classes[x].cssText ? classes[x].cssText : classes[x].style.cssText).match(/\{\s*([^{}]+)\s*\}/)[1];
                var classStyles = {};
                var styleSets = classStyleTxt.match(/([^;:]+:\s*[^;:]+\s*)/g);
                for(y=0;y<styleSets.length;y++){
                    var style = styleSets[y].match(/\s*([^:;]+):\s*([^;:]+)/);
                    if(style.length > 2)
                        classStyles[style[1]]=style[2];
                }
                return classStyles;
            }
        }
    }
    return false;
};
— sledmouth
kaynak
style.cssText.match(...).1boş mu yoksa nesne değil mi
— dostum
Uncaught ReferenceError: classStyleTxt is not defined
— Jacksonkr
0

Tüm stil sayfalarında arama yapan ve eşleşmeleri anahtar / değer nesnesi olarak döndüren bir sürüm oluşturdum. Ayrıca, alt stilleri eşleştirmek için beginWith belirtebilirsiniz .

getStylesBySelector('.pure-form-html', true);

İadeler:

{
    ".pure-form-html body": "padding: 0; margin: 0; font-size: 14px; font-family: tahoma;",
    ".pure-form-html h1": "margin: 0; font-size: 18px; font-family: tahoma;"
}

dan: 

.pure-form-html body {
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-family: tahoma;
}

.pure-form-html h1 {
    margin: 0;
    font-size: 18px;
    font-family: tahoma;
}

Kod:

/**
 * Get all CSS style blocks matching a CSS selector from stylesheets
 * @param {string} className - class name to match
 * @param {boolean} startingWith - if true matches all items starting with selector, default = false (exact match only)
 * @example getStylesBySelector('pure-form .pure-form-html ')
 * @returns {object} key/value object containing matching styles otherwise null
 */
function getStylesBySelector(className, startingWith) {

    if (!className || className === '') throw new Error('Please provide a css class name');

    var styleSheets = window.document.styleSheets;
    var result = {};

    // go through all stylesheets in the DOM
    for (var i = 0, l = styleSheets.length; i < l; i++) {

        var classes = styleSheets[i].rules || styleSheets[i].cssRules || [];

        // go through all classes in each document
        for (var x = 0, ll = classes.length; x < ll; x++) {

            var selector = classes[x].selectorText || '';
            var content = classes[x].cssText || classes[x].style.cssText || '';

            // if the selector matches
            if ((startingWith && selector.indexOf(className) === 0) || selector === className) {

                // create an object entry with selector as key and value as content
                result[selector] = content.split(/(?:{|})/)[1].trim();
            }
        }
    }

    // only return object if we have values, otherwise null
    return Object.keys(result).length > 0 ? result : null;
}

Bunu saf form projesinin bir parçası olarak üretimde kullanıyorum . Umarım yardımcı olur.

— John Doherty
kaynak
0

Ben de aynı problemle karşılaştım. Ve adamların yardımıyla, bu sorunu tamamen çözen gerçekten akıllı bir çözüm buldum (chrome'da çalıştırın).

Tüm görüntüleri ağdan çıkarın

 function AllImagesUrl (domain){
  return  performance.getEntries()
    .filter( e=> 
       e.initiatorType == "img" &&
       new RegExp(domain).test(e.name) 
    )
  .map( e=> e.name.replace('some cleaning work here','') ) ```
— Pery mimon
kaynak
0 
const getStyle = query => [...document.querySelector(query).computedStyleMap().entries()].map(e=>(e[1]+=[],e)).map(e=>e.join`:`+';').join`\n`

Bir satırda, herhangi bir sorgu için oluşturulan css'i yazdırır.

— x86
kaynak
-2

@Dude cevabına göre bu, bir nesnede ilgili stilleri döndürmelidir, örneğin:

.recurly-input {                                                                                                                                                                             
  display: block;                                                                                                                                                                            
  border-radius: 2px;                                                                                                                                                                        
  -webkit-border-radius: 2px;                                                                                                                                                                
  outline: 0;                                                                                                                                                                                
  box-shadow: none;                                                                                                                                                                          
  border: 1px solid #beb7b3;                                                                                                                                                                 
  padding: 0.6em;                                                                                                                                                                            
  background-color: #f7f7f7;                                                                                                                                                                 
  width:100%;                                                                                                                                                                                
}

Bu geri dönecek:

backgroundColor:
"rgb(247, 247, 247)"
border
:
"1px solid rgb(190, 183, 179)"
borderBottom
:
"1px solid rgb(190, 183, 179)"
borderBottomColor
:
"rgb(190, 183, 179)"
borderBottomLeftRadius
:
"2px"
borderBottomRightRadius
:
"2px"
borderBottomStyle
:
"solid"
borderBottomWidth
:
"1px"
borderColor
:
"rgb(190, 183, 179)"
borderLeft
:
"1px solid rgb(190, 183, 179)"
borderLeftColor
:
"rgb(190, 183, 179)"
borderLeftStyle
:
"solid"
borderLeftWidth
:
"1px"
borderRadius
:
"2px"
borderRight
:
"1px solid rgb(190, 183, 179)"
borderRightColor
:
"rgb(190, 183, 179)"
borderRightStyle
:
"solid"
borderRightWidth
:
"1px"
borderStyle
:
"solid"
borderTop
:
"1px solid rgb(190, 183, 179)"
borderTopColor
:
"rgb(190, 183, 179)"
borderTopLeftRadius
:
"2px"
borderTopRightRadius
:
"2px"
borderTopStyle
:
"solid"
borderTopWidth
:
"1px"
borderWidth
:
"1px"
boxShadow
:
"none"
display
:
"block"
outline
:
"0px"
outlineWidth
:
"0px"
padding
:
"0.6em"
paddingBottom
:
"0.6em"
paddingLeft
:
"0.6em"
paddingRight
:
"0.6em"
paddingTop
:
"0.6em"
width
:
"100%"

Kod:

function getStyle(className_) {

    var styleSheets = window.document.styleSheets;
    var styleSheetsLength = styleSheets.length;
    for(var i = 0; i < styleSheetsLength; i++){
        var classes = styleSheets[i].rules || styleSheets[i].cssRules;
        if (!classes)
            continue;
        var classesLength = classes.length;
        for (var x = 0; x < classesLength; x++) {
            if (classes[x].selectorText == className_) {
                return _.pickBy(classes[x].style, (v, k) => isNaN(parseInt(k)) && typeof(v) == 'string' && v && v != 'initial' && k != 'cssText' )
            }
        }
    }

}
— brauliobo
kaynak
kullanımda lodash olmadan herhangi bir şey? _.pickBy başka türlü mevcut değil.
— mpag
k & v, onlardan ne istediğinize bağlı olarak tersine çevrilir .... iade edilmelidir_.pickBy(classes[x].style, (k,v) => isNaN(parseInt(k)) && typeof(v) == 'string' && v && v != 'initial' && k != 'cssText' )
— mpag
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.