Как получить цвет div блока на js?

#javascript #jquery

Как можно получить цвет div блока (background css) и вывести например через alert()? 
 Например: чтобы выводилось ff7659 после клика на кнопку.

Код на : jsfiddle.net

Html:


  


Получить цвет


Js:

$("#but_color").click(function () {

    //alert();

});


Css:

#color_bk{
  height:150px;
  width:150px;
  background: #ff7659;
}

#but_color{
  height:20px;
  width:150px;
  background: #5ca7df;
  padding: 5px 0;
  text-align: center;
  color: #000; 
  font-size:16px; 
  font-weight:bold;
  cursor: pointer;
}

    

Ответы

Ответ 1

$("#but_color").on('click', function () {
  var bg = $("#color_bk").css("backgroundColor");
  alert(parseColor(bg).hex);
});




function parseColor(color) {
    var arr=[]; color.replace(/[\d+\.]+/g, function(v) { arr.push(parseFloat(v)); });
    return {
        hex: "#" + arr.slice(0, 3).map(toHex).join(""),
        opacity: arr.length == 4 ? arr[3] : 1
    };
}
function toHex(int) {
    var hex = int.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}




parseColor("rgb(210, 10, 10)");  // {"hex":"#d20a0a","opacity":1}
parseColor("rgba(210, 10, 10, 0.5)"); // {"hex":"#d20a0a","opacity":"0.5"}
parseColor("rgb(210)");  // {"hex":"#d2","opacity":1}


Ответ 2

var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

function convertToHex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }


https://jsfiddle.net/wa2r1q7p/3/  подсмотрено с stackoverflow.

Это если нужно именно в хексе цвет, а так можно просто $('#color_bk').css('background-color')


Ответ 3

Пример без использования jQuery. Цвет преобразуется в #XXXXXX, если он задан без
прозрачности. Если есть прозрачность, то его представление в виде #... невозможно и
возвращается rgba(...).



function getColor(tag) {
    var toHex = function(color) {
        var hex = function(str) {
            result = parseInt(str).toString(16);
            if (result.length < 2)
                result = '0' + result;
            return result;
        }
        
        rgb = color.match(/^rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)$/);
        if (!rgb)
            return color;
        return '#' + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
    }
    
    var style = window.getComputedStyle(tag);
    return toHex(style.backgroundColor);
}

function onClick() {
    var color1 = getColor(document.getElementsByClassName("div1")[0]);
    var color2 = getColor(document.getElementsByClassName("div2")[0]);
    alert(color1 + '\n' + color2);
}
.div1 {
    background-color: rgba(0, 255, 0, 0.3);
    width: 100px;
    height: 50px;
    margin: 1em;
}
.div2 {
    background-color: #F8A;
    width: 100px;
    height: 50px;
    margin: 1em;
}





Ответ 4

На примере stackoverflow

a = document.querySelector('#mdhelp');
b = a.attributes.style.value.split(';')[3].split(':')[1];