Question

目前我想通过javascript读出css的背景颜色来更新具有所需颜色的画布。到目前为止，我通过在html中创建一个虚拟对象来实现它，该对象包含我可以从中读取它的css：

CSS内容：

.logmessage-debug {
    color: #fff;
    background-color: #999999;
}

.logmessage-info {
    color: #fff;
    background-color: #5cb85c;
}

.logmessage-warn {
    color: #fff;
    background-color: #f0ad4e;
}

.logmessage-error {
    color: #fff;
    background-color: #d9534f;
}

.logmessage-fatal {
    color: #fff;
    background-color: #d955d9;
}

HTML部分：

<canvas id="myCanvas" width="200" height="200"></canvas>
<!-- The dummy objects allowing access to the css properties -->
<div id="debug" class="logmessage-debug"></div>
<div id="info" class="logmessage-info"></div>
<div id="warn" class="logmessage-warn"></div>
<div id="error" class="logmessage-error"></div>
<div id="fatal" class="logmessage-fatal"></div>

<script type="text/javascript">
    updateCanvas();
</script>

JavaScript部分：

function updateCanvas() {
    $.ajax({
        url: "api/myWebService",
        success: function (severityLevel) {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.fillStyle = getSeverityColorFromStyle(severityLevel);
            ctx.fillRect(0, 0, c.clientWidth, c.clientHeight);
        },
        complete: function() {
            setTimeout(updateCanvas, 2000);
        }
    })
}

function getSeverityColorFromStyle(styleName) {
    // Any other way to read the css background color
    // directly instead of asking the dummy object?
    return $("#" + styleName).css("background-color");
}

到目前为止，上述方式按预期工作，我可以得到我喜欢的所需颜色。但是，为了获得所需的css值，添加这些虚拟对象让我感到不舒服。存在任何直接方式从css中检索这些值？

Answer 1

您可以创建一个循环遍历页面上所有样式表/规则并尝试匹配的函数

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) {
            return (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;
        }
    }
}

有关详细信息How do you read CSS rule values with JavaScript?

，请参阅此前一篇文章

Answer 2

如果您知道 Rule 或 Sheet 的位置，您可以通过相关的轻松获取该位置> CSSStyleSheet ，例如

<style id="foo">/* etc */</style>

然后

function getSeverityColorFromStyle(kwd) {
    var i, rules = document.getElementById('foo').sheet.rules;
    kwd = '.logmessage-' + kwd;
    for (i = rules.length; i--;) // find in sheet's rules
        if (rules[i].selectorText.indexOf(kwd) !== -1) // found
            return rules[i].style.backgroundColor;
    return '';
}

访问 CSSStyleRule 的style，您可以让浏览器解析 cssText 。

如果您不知道工作表，您可能希望在document.styleSheets

之外再进行一次循环

Answer 3

var theColor = $('.class').css('background-color');

Answer 4

因为似乎没有这种简单的方法可以访问css样式，比如访问文档中的现有元素。

最后，我决定从保罗和JBB那里得到答案，并且（希望）对它们进行了一些改进。我在所有可用样式表中迭代所有可用规则，并将有趣的东西推送到我自己的缓存对象中。在getSeverityColorFromStyle()方法中，我尝试从中获取匹配的颜色。

var logLevelColors;

function updateCanvas() {
    if(logLevelColors == undefined)
        initializeLogLevelColors();

    $.ajax({
        url: "api/myWebService",
        success: function (severityName) {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.fillStyle = getSeverityColorFrom(severityName);
            ctx.fillRect(0, 0, c.clientWidth, c.clientHeight);
        },
        complete: function() {
            setTimeout(updateCanvas, 2000);
        }
    })
}

function initializeLogLevelColors() {
    logLevelColors = new Object();
    var logMessageIdentifier = '.logmessage-';

    $.each(document.styleSheets, function (_, styleSheet) {
        $.each(styleSheet.rules, function (_, rule) {
            if (rule.selectorText.indexOf(logMessageIdentifier) == 0) {
                var logLevel = rule.selectorText.substring(logMessageIdentifier.length);
                var color = rule.style.backgroundColor;

                logLevelColors[logLevel] = color;
            }
        })
    })
}
function getSeverityColorFrom(severityName) {
    var undefinedColor = 'rgba(0, 0, 0, 0.00)';

    if (logLevelColors == undefined)
        return undefinedColor;

    return logLevelColors[severityName]
           || undefinedColor;
}

Answer 5

如何将css类直接设置为canvas？

类似于：<canvas id="myCanvas" class="error"></canvas>，然后您可以实际获得画布的计算样式，并更新其中的元素。

var canvas = document.getElementById("canvas"), styles = getComputedStyle(canvas);

//log the properties
console.log(styles.color, styles.backgroundColor);

Answer 6

<script type="text/javascript">
   var myText = document.getElementById("text");
   alert(myText.style.display);
   alert(myText.style.color);
   ...etc
</script>

通过javascript检索CSS属性值

6 个答案: