blocks|key|1267266|text|我已经编写了一个帮助器函数，它接受一个具有要从给定css类检索的css属性的对象，并填充实际的css属性值。其中包含了一个示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1267267|function+getStyleSheetValues(colScheme)+{
++++var+tags='';
++++var+obj=+colScheme;
++++
++++//+enumerate+css+classes+from+object
++++for+(var+prop+in+obj)+{+
++++++++if+(obj.hasOwnProperty(prop)+&&+typeof+obj[prop]=="object")+{+
++++++++++++tags%2B=+'<span+class="'%2Bprop%2B'"></span>';
++++++++}+
++++}+
++++
++++//+generate+an+object+that+uses+the+given+classes
++++tags=+$('<div>'%2Btags%2B'</div>').hide().appendTo("body");
++++
++++//+read+the+class+properties+from+the+generated+object
++++var+idx=+0;
++++for+(var+prop+in+obj)+{+
++++++++if+(obj.hasOwnProperty(prop)+&&+typeof+obj[prop]=="object")+{+
++++++++++++var+nobj=+obj[prop];
++++++++++++for+(var+nprop+in+nobj)+{+
++++++++++++++++if+(nobj.hasOwnProperty(nprop)+&&+typeof(nobj[nprop])=="string")+{+
++++++++++++++++++++nobj[nprop]=+tags.find("span:eq("%2Bidx%2B")").css(nobj[nprop]);
++++++++++++++++}
++++++++++++}
++++++++++++idx%2B%2B;
++++++++}+
++++}+
++++tags.remove();
}

//+build+an+object+with+css+class+names+where+each+class+name+contains+one+
//+or+more+properties+with+an+arbitrary+name+and+the+css+attribute+name+as+its+value.
//+This+value+will+be+replaced+by+the+actual+css+value+for+the+respective+class.
var+colorScheme=+{+chart_wall:+{wallColor:'background-color',wallGrid:'color'},+chart_line1:+{+color:'color'}+};

$(document).ready(function()+{
++++getStyleSheetValues(colorScheme);

++++//+debug:+write+the+property+values+to+the+console;+++++
++++if+(window.console)+{
++++++++var+obj=+colorScheme;
++++++++for+(var+prop+in+obj)+{+
++++++++++++if+(obj.hasOwnProperty(prop)+&&+typeof+obj[prop]=="object")+{+
++++++++++++++++var+nobj=+obj[prop];
++++++++++++++++for+(var+nprop+in+nobj)+{+
++++++++++++++++++++if+(nobj.hasOwnProperty(nprop))+{+
++++++++++++++++++++++++console.log(prop%2B'.'%2Bnprop+%2B':'%2B+nobj[nprop]);
++++++++++++++++++++}
++++++++++++++++}
++++++++++++}+
++++++++}+
++++++++//+example+of+how+to+read+an+individual+css+attribute+value
++++++++console.log('css+value+for+chart_wall.wallGrid:+'%2BcolorScheme.chart_wall.wallGrid);
++++}
});|code-block|syntax|javascript|1267268|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I have written a helper function that accepts an object with the css attributes to be retrieved from the given css class and fills in the actual css attribute values.
Example is included.</p>
<pre><code>function getStyleSheetValues(colScheme) {
    var tags='';
    var obj= colScheme;
    
    // enumerate css classes from object
    for (var prop in obj) { 
        if (obj.hasOwnProperty(prop) &amp;&amp; typeof obj[prop]==&quot;object&quot;) { 
            tags+= '&lt;span class=&quot;'+prop+'&quot;&gt;&lt;/span&gt;';
        } 
    } 
    
    // generate an object that uses the given classes
    tags= $('&lt;div&gt;'+tags+'&lt;/div&gt;').hide().appendTo(&quot;body&quot;);
    
    // read the class properties from the generated object
    var idx= 0;
    for (var prop in obj) { 
        if (obj.hasOwnProperty(prop) &amp;&amp; typeof obj[prop]==&quot;object&quot;) { 
            var nobj= obj[prop];
            for (var nprop in nobj) { 
                if (nobj.hasOwnProperty(nprop) &amp;&amp; typeof(nobj[nprop])==&quot;string&quot;) { 
                    nobj[nprop]= tags.find(&quot;span:eq(&quot;+idx+&quot;)&quot;).css(nobj[nprop]);
                }
            }
            idx++;
        } 
    } 
    tags.remove();
}

// build an object with css class names where each class name contains one 
// or more properties with an arbitrary name and the css attribute name as its value.
// This value will be replaced by the actual css value for the respective class.
var colorScheme= { chart_wall: {wallColor:'background-color',wallGrid:'color'}, chart_line1: { color:'color'} };

$(document).ready(function() {
    getStyleSheetValues(colorScheme);

    // debug: write the property values to the console;     
    if (window.console) {
        var obj= colorScheme;
        for (var prop in obj) { 
            if (obj.hasOwnProperty(prop) &amp;&amp; typeof obj[prop]==&quot;object&quot;) { 
                var nobj= obj[prop];
                for (var nprop in nobj) { 
                    if (nobj.hasOwnProperty(nprop)) { 
                        console.log(prop+'.'+nprop +':'+ nobj[nprop]);
                    }
                }
            } 
        } 
        // example of how to read an individual css attribute value
        console.log('css value for chart_wall.wallGrid: '+colorScheme.chart_wall.wallGrid);
    }
});
</code></pre>


blocks|key|1052697|text|作为对Karim79的回应，我想我应该抛出我的函数版本的答案。我已经做了好几次了，所以我是这样写的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1052698|function+getClassStyles(parentElem,+selector,+style){
++++elemstr+=+'<div+'%2B+selector+%2B'></div>';
++++var+$elem+=+$(elemstr).hide().appendTo(parentElem);
++++++++val+=+$elem.css(style);
++++$elem.remove();
++++return+val;
}
val+=+getClassStyles('.container:first',+'class="title"',+'margin-top');
console.warn(val);|code-block|syntax|javascript|1052699|这个例子假设你有一个带有class=“容器”的和元素，并且你要在那个元素中寻找标题类的页边距-顶部样式。当然，根据您的需要进行更改。|1052700|在样式表中：|1052701|+.container+.title{+margin-top:num;+}|1052702|让我知道你的想法--你会修改它吗，如果是的话，是如何修改的？谢谢!|1052703|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>In response to Karim79, I just thought I'd toss out my function version of that answer.  I've had to do it several times so this is what I wrote:</p>

<pre><code>function getClassStyles(parentElem, selector, style){
    elemstr = '&lt;div '+ selector +'&gt;&lt;/div&gt;';
    var $elem = $(elemstr).hide().appendTo(parentElem);
        val = $elem.css(style);
    $elem.remove();
    return val;
}
val = getClassStyles('.container:first', 'class="title"', 'margin-top');
console.warn(val);
</code></pre>

<p>This example assumes you have and element with class="container" and you're looking for the margin-top style of the title class in that element.  Of course change up to fit your needs. </p>

<p>In the stylesheet:</p>

<pre><code> .container .title{ margin-top:num; }
</code></pre>

<p>Let me know what you think - Would you modify it, and if so how?  Thanks!</p>


blocks|key|1267405|text|通常，您应该让浏览器应用所有规则，然后向浏览器请求结果，但在极少数情况下，您确实需要从样式表中获取值，您可以使用以下命令：(JSFiddle)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1267406|function+getStyleSheetPropertyValue(selectorText,+propertyName)+{
++++//+search+backwards+because+the+last+match+is+more+likely+the+right+one
++++for+(var+s=+document.styleSheets.length+-+1;+s+>=+0;+s--)+{
++++++++var+cssRules+=+document.styleSheets[s].cssRules+%7C%7C
++++++++++++++++document.styleSheets[s].rules+%7C%7C+[];+//+IE+support
++++++++for+(var+c=0;+c+<+cssRules.length;+c%2B%2B)+{
++++++++++++if+(cssRules[c].selectorText+===+selectorText)+
++++++++++++++++return+cssRules[c].style[propertyName];
++++++++}
++++}
++++return+null;
}

alert(getStyleSheetPropertyValue("p",+"color"));|code-block|syntax|javascript|1267407|请注意，这是非常脆弱的，因为您必须提供与正在查找的规则匹配的完整选择器文本(它不会被解析)，并且它不处理重复条目或任何类型的优先规则。对于我来说，当使用它时很难想到一个案例是一个好主意，但这里只是作为一个例子。|1267408|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/OldPro/sx68T/^0|1Q|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>Normally you should be let the browser apply all the rules and then ask the browser for the results, but for the rare case where you really need to get the value out of the style sheet you can use this:  (<a href="http://jsfiddle.net/OldPro/sx68T/" rel="nofollow noreferrer">JSFiddle</a>)
</p>

<pre><code>function getStyleSheetPropertyValue(selectorText, propertyName) {
    // search backwards because the last match is more likely the right one
    for (var s= document.styleSheets.length - 1; s &gt;= 0; s--) {
        var cssRules = document.styleSheets[s].cssRules ||
                document.styleSheets[s].rules || []; // IE support
        for (var c=0; c &lt; cssRules.length; c++) {
            if (cssRules[c].selectorText === selectorText) 
                return cssRules[c].style[propertyName];
        }
    }
    return null;
}

alert(getStyleSheetPropertyValue("p", "color"));
</code></pre>

<p>Note that this is pretty fragile, as you have to supply the full selector text that matches the rule you are looking up (it is not parsed) and it does not handle duplicate entries or any kind of precedence rules.  It's hard for me to think of a case when using this would be a good idea, but here it is just as an example.</p>


blocks|key|1267451|text|我写了这个js函数，似乎也适用于嵌套类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1267452|用法：|1267453|var+style+=+get_css_property('.container-class+.sub-container-class+.child-class',+'margin');
console.log('style');


function+get_css_property(class_name,+property_name){
++++class_names+=+class_name.split(/\s%2B/);
++++var+container+=+false;
++++var+child_element+=+false;

++++for+(var+i+=+class_names.length+-+1;+i+>=+0;+i--)+{
++++++++if(class_names[i].startsWith('.'))
++++++++++++class_names[i]+=+class_names[i].substring(1);
++++++++var+new_element+=+$.parseHTML('<div+class="'+%2B+class_names[i]+%2B+'"></div>');
++++++++if(!child_element)
++++++++++++child_element+=+new_element;
++++++++if(container)
++++++++++++$(new_element).append(container);
++++++++container+=+new_element;
++++}
++++$(container).hide().appendTo('body');
++++var+style+=+$(child_element).css(property_name);
++++$(container).remove();
++++return+style;
}|code-block|syntax|javascript|1267454|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I wrote this js function, seems to be working for nested classes as well:</p>

<p>usage:</p>

<pre><code>var style = get_css_property('.container-class .sub-container-class .child-class', 'margin');
console.log('style');


function get_css_property(class_name, property_name){
    class_names = class_name.split(/\s+/);
    var container = false;
    var child_element = false;

    for (var i = class_names.length - 1; i &gt;= 0; i--) {
        if(class_names[i].startsWith('.'))
            class_names[i] = class_names[i].substring(1);
        var new_element = $.parseHTML('&lt;div class="' + class_names[i] + '"&gt;&lt;/div&gt;');
        if(!child_element)
            child_element = new_element;
        if(container)
            $(new_element).append(container);
        container = new_element;
    }
    $(container).hide().appendTo('body');
    var style = $(child_element).css(property_name);
    $(container).remove();
    return style;
}
</code></pre>


<p>Is it possible to get a value from the external CSS of a page if the element that the style refers to has not been generated yet? (the element is to be generated dynamically).</p>

<p>The jQuery method I've seen is <code>$('element').css('property');</code>, but this relies on <code>element</code> being on the page. Is there a way of finding out what the property is set to within the CSS rather than the computed style of an element?</p>

<p>Will I have to do something ugly like add a hidden copy of the element to my page so that I can access its style attributes?</p>


Get a CSS value from external style sheet with Javascript/jQuery

容器

jQuery

如果样式引用的元素尚未生成，是否可以从页面的外部CSS获取一个值？(该元素是动态生成的)。我见过的jQuery方法是$('element').css('property');，但这依赖于页面上的element。有没有办法在CSS中找出属性的设置，而不是元素的计算样式？我是否必须做一些丑陋的事情，比如在我的页面中添加一个...

问使用Javascript/jQuery从外部样式表获取CSS值
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript/jQuery从外部样式表获取CSS值EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript/jQuery从外部样式表获取CSS值
EN