Загрузить значение свойства CSS через javascript

Question

В настоящее время я хотел бы прочитать цвет фона css через javascript, чтобы обновить холст с желаемым цветом. До сих пор я заставить его работать, создавая фиктивный объекта в 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

Так как кажется, не существует никакой такой простой способ, чтобы получить доступ к стилю CSS, как доступ существующего элемента в пределах документа.

В конце я решил взять ответы от Paul и 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 2

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

Answer 3

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

Answer 4

Вы можете создать функцию, которая перебирает все таблиц стилей/правил на странице и пытается соответствовать его

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 5

Если вы знаете положение 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 ''; 
} 

Доступ к style из CSSStyleRule позволяет позволить браузеру разобрать cssText.

Если вы не знаете, лист, вы можете сделать еще один цикл через document.styleSheets

Answer 6

Как насчет установки класса css непосредственно на холст?

Что-то вроде: <canvas id="myCanvas" class="error"></canvas>, а затем вы можете получить вычисленный стиль холста и обновить элементы внутри.

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

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