JavaScript로 CSS 규칙 값을 어떻게 읽습니까?

115

인라인 스타일에서 볼 수있는 형식과 같이 CSS 규칙의 모든 내용이 포함 된 문자열을 반환하고 싶습니다. 특정 규칙에 포함 된 내용을 알지 못해도이 작업을 수행 할 수 있기를 원하므로 스타일 이름 (예 : .style.width등)으로 만 빼낼 수 없습니다 .

CSS :

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

지금까지 코드 :

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 
— Diodeus-James MacFarlane
소스
이것도 확인하십시오. stackoverflow.com/questions/53592919/...
— Mithilesh 쿠마에게

답변:

90

여기 에서 수정 하여 scunliffe의 답변을 기반으로합니다.

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
소스
11
className은 CSS 파일에 사용 된 선택기와 정확히 일치해야합니다. 예를 들어, ".article a, article a : hover {color : #ccc;}"와 같이 스타일이 설명 된 경우 getStyle ( ". article a")은 아무것도 찾지 못합니다.
— Vilius Paulauskas 2011 년
1
이것은 크롬에서는 작동하지 않지만 파이어 폭스에서는 작동합니다. 무엇이 문제일까요 ??
— Johnydep 2011
13
스타일 시트가 여러 개인 경우 해당 스타일 시트도 반복해야합니다 .for (var i = 0; i <document.styleSheets.length; i ++) {var s = document.styleSheets [i];}
— surya
A에 대한 내 대답은 적응 전체 작업 솔루션을 참조하십시오 @surya
— 친구
2
@Johnydep var classes는 document.styleSheets[0].rules[0].cssRulesChrome에 있어야합니다 . 이것은 (창의적으로) 대답의 심에 추가 될 수 있습니다.
— Henrik Christensen
23

"nsdel"에서 받아 들여진 답변은 문서에있는 하나의 스타일 시트에서만 사용할 수 있기 때문에 이것은 조정 된 전체 작업 솔루션입니다.

    /**
     * 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;
                }
            }
        }

    }

주의 : 선택자는 CSS에서와 동일해야합니다.

— 친구
소스
global_창 개체의 별칭이 아닙니다. 코드 조각을 편집했습니다. 이제 작동합니다
— 친구
3
스타일 시트에 규칙이 없거나 cssRules (발생할 수 있음)가 없으면 코드가 실패합니다. add if (! classes) continue; var classes = styleSheets [i] .rules || 이후 styleSheets [i] .cssRules; var classesLength = classes.length; 내 편집을 참조
— kofifus
1
작동하지만, 문자열 대신 객체를 반환해야합니다
— brauliobo
@kofifus 당신의 접근 방식이 추가되었습니다
— 친구
이것은 GC versio 64.0 이후로 작동하지 않습니다 : stackoverflow.com/questions/48753691/…
— Shalev Levi
18

솔루션 1 (크로스 브라우저)

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

솔루션 2 (크로스 브라우저)

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. 토 두아
소스
6

알아야 할 몇 가지 브라우저 차이점 :

주어진 CSS :

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

InsDel의 예에서 클래스는 FF에서 2 개의 클래스와 IE7에서 3 개의 클래스를 갖습니다 .

내 예는 이것을 설명합니다.

<!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>
— 라르스 날
소스
4

다음은 페이지의 모든 규칙을 반복하는 코드입니다.

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' : '')+' }');
});
스 니펫 확장

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

참고 : "메뉴"는 CSS를 적용한 요소 ID입니다. "className"은 텍스트를 가져 오는 데 필요한 CSS 클래스 이름입니다.

— Sivaprakasht
소스
이것이 작동하는 것이 확실합니까? (AFAIK item메서드는 className이 아닌 정수 인덱스를 사용합니다.)
— Julien Kronegg 2013
완전 넌센스
— tnt-rox
2

정말 효과가있는 제안을 찾지 못했습니다. 여기에 클래스를 찾을 때 간격을 정규화하는 더 강력한 것이 있습니다.

//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));
    };
})();

Chrome 콘솔에서 실행중인 작업입니다.

여기에 이미지 설명 입력

— 데릭 짐바
소스
1
이것은이 페이지의 모든 답변의 메카입니다. 나는 이것이 github에 있어야한다고 말하기까지 갈 것입니다
— Jacksonkr
제공된 구문의 Array.map ()이 지원되지 않기 때문에 IE11에서는 작동하지 않습니다. 나는 그것을 오래된 function () {return xxx; } 더 나은 호환성을위한 구문. 그렇지 않으면 훌륭한 대답입니다!
— Demonblack
1
IE11 (예 : ES5)에서 작동하도록 수정했습니다. 다음은 필요한 모든 것이 포함 된 JSFiddle입니다. jsfiddle.net/xp5r8961
— Demonblack
1

이 페이지에 불필요한 스타일을 보여주는 유사한 도우미 기능을 만들었습니다. <div>사용되지 않은 모든 스타일을 나열하는 본문 에 를 추가합니다 .

(방화범 콘솔과 함께 사용)

(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
소스
1

더 완전한 결과를 얻기 위해 줄못의 대답을 수정했습니다. 이 메서드는 클래스가 선택기의 일부인 스타일도 반환합니다.

//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;    
    }
}

또한 jquery 선택기를 통해 제공하는 루트 노드의 하위 트리에 CSS 스타일 정의를 수집하는 함수를 만들었습니다. 

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;
}

클래스가 동일한 선택기로 여러 번 정의 된 경우 위의 함수는 첫 번째 만 선택합니다. 이 예제에서는 jQuery를 사용합니다 (그러나 cab은 사용하지 않도록 비교적 쉽게 다시 작성 됨).

— dparnas
소스
1
비 JQuery와 솔루션을 가지고 좋은 것 (그리고 jsfiddle을 ..)
— kofifus
0

// IE에서 작동하지만 다른 브라우저는 확실하지 않습니다 ...

alert(classes[x].style.cssText);
— Scunliffe
소스
0

이 버전은 페이지의 모든 스타일 시트를 살펴 봅니다. 내 필요에 따라 스타일은 일반적으로 20 개 이상의 스타일 시트 중 두 번째에서 마지막에 있었으므로 거꾸로 확인합니다.

    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;
    };
— 그 리그
소스
0

속성이 스타일 / 값으로 구문 분석되는 객체 반환을 추가했습니다.

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;
};
— 썰매
소스
style.cssText.match(...).1null이거나 객체가 아닙니다
— dude
Uncaught ReferenceError: classStyleTxt is not defined
— Jacksonkr
0

모든 스타일 시트를 검색하고 일치하는 항목을 키 / 값 개체로 반환하는 버전을 만들었습니다. startWith 를 지정 하여 자식 스타일과 일치 시킬 수도 있습니다 .

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

보고:

{
    ".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;"
}

에서: 

.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;
}

코드:

/**
 * 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;
}

저는 순수 형식 프로젝트의 일부로 프로덕션에서 이것을 사용하고 있습니다. 도움이 되었기를 바랍니다.

— 존 도허티
소스
0

나는 같은 문제에 직면했다. 그리고 사람들의 도움으로 그 문제를 완전히 해결할 수있는 정말 똑똑한 솔루션을 생각해 냈습니다 (크롬에서 실행).

네트워크에서 모든 이미지 추출

 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','') ) ```
— 페리 미몬
소스
0 
const getStyle = query => [...document.querySelector(query).computedStyleMap().entries()].map(e=>(e[1]+=[],e)).map(e=>e.join`:`+';').join`\n`

한 줄에 모든 쿼리에 대해 생성 된 CSS를 인쇄합니다.

— x86
소스
-2

@dude 답변에 따라 객체의 관련 스타일을 반환해야합니다. 예를 들면 다음과 같습니다.

.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%;                                                                                                                                                                                
}

다음을 반환합니다.

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%"

암호:

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
소스
lodash가 사용되지 않는 것은 무엇입니까? _.pickBy는 그렇지 않으면 존재하지 않습니다.
— mpag
k & v는 당신이 그들에게 요구하는 것에 따라 반전됩니다 .... 반환되어야합니다_.pickBy(classes[x].style, (k,v) => isNaN(parseInt(k)) && typeof(v) == 'string' && v && v != 'initial' && k != 'cssText' )
— mpag
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.