尝试使用 jquery 获取 css 值

Question

我正在尝试获取 background 的 css 值。我的尝试失败了，并且没有提供正确的值。我有一个spectrum.js 颜色选择器，无论我选择哪种颜色rgba(0,0,0,0) 总是被选择。当我在控制台中查看背景时，它会在 DOM 中正确显示。

有人知道为什么会失败吗？

<div class="container" id="outside-preview">
    <div class="container" id="inside-preview">
       <div id="image-square"></div>
    </div>
 </div>

$(".colorpicker").spectrum({
    color: "#FFF",
    showInput: true,
    className: "full-spectrum",
    showInitial: true,
    showPalette: true,
    showSelectionPalette: true,
    maxSelectionSize: 10,
    preferredFormat: "hex",
    localStorageKey: "spectrum.demo",
    change: function(color) {
        var eq =  $(this).index('.colorpicker');
        $('.container').eq(eq).css('background-color', color.toHexString())
    }
});

var color = $( "#outside-preview" ).css( "background-color" );
$("#result").html("That div is " + color + "");

Fiddle

Answer 1

您需要将读取 CSS 值的代码放在 change 处理程序中，以便在做出选择后更新 #result 元素。您当前的代码仅在加载时读取。

change: function(color) {
    var eq = $(this).index('.colorpicker');
    $('.container').eq(eq).css('background-color', color.toHexString())

    var color = $("#outside-preview").css("background-color");
    $("#result").html("That div is " + color);
},

Updated fiddle