rgb问题演示

Question

这是我的代码：

function getTraits(trait) {
    $("#"+trait).on("click", function() {
        alert($(this).css('backgroundColor'));
        if (toHex($(this).css('background-color')) != highlightedColor) {
            $("#"+trait).css("background-color", highlightedColor);
            // If the element isn't highlighted, highlight it.
        } else {
            $(this).css("backgroundColor", defaultColor);
        }
    })
}

我试图在用户点击时切换div上的突出显示。我想获取div的背景颜色，因为为每个div存储布尔值切换效率不高。所以我想要一个toHex(rgb)函数。我在SO上看到了很多，所以我尝试使用它们，但没有一个起作用。我放给我的alert()展示了JQuery返回的格式给了我rgba(0,0,0,0)。我试图修改这样找到的正则表达式：

var rgb = rgb.match(/^rgba((\d+),\s*(\d+),\s*(\d+))$/);

无法处理TypeError：rgb is null。

感谢您能给我任何帮助！

Answer 1

我知道，不是您问题的答案，但是您是否考虑过jQuery的toggleClass()选项？

定义highlighted CSS类：

DIV.default { background-color: whitesmoke; }
DIV.highlighted { background-color: yellow; }

，然后当用户单击您的DIV时：

function getTraits(trait) {
    $("#"+trait).on("click", function() {
        // Toggle both classes so as to turn one "off" 
        // and the other "on"
        $(this).toggleClass('default');
        $(this).toggleClass('highlighted');

        // Ensure we have at least one class (default)
        var hasOne = $(this).hasClass('highlighted') || $(this).hasClass('default');
        if (!hasOne) {
          $(this).addClass('default');
        }
    })
}

Answer 2

首先获取Background-Color并使用以下函数将其转换为十六进制值

table.Find(object.ID)

Answer 3

您的问题：如果未设置背景颜色（即rgba(0, 0, 0, 0) / undefinied），jquery将返回null。您遇到的问题是，您正在尝试将未定义的rgb字符串解析到十六进制转换器中。

我已经在here的转换对象中添加了一个子句，以便在未设置值的情况下返回白色，但这需要取消注释，不建议这样做。

建议的解决方案是使用toggleClass，进一步查看演示，展示如何在单个元素或整个DOM树上切换高亮显示。

rgb问题演示

// Cycle through each div
$("#example-wrap div").each(function() {

  // Store rgb color
  var rgb = $(this).css('backgroundColor');
  
  // Print rgb color to the div
  $(this).append( ": " + rgb);

  // Append the hex value
  $(this).append(" -> " + rgb2hex(rgb));
  
});


function rgb2hex(rgb) {
  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

  function hex(x) {
    return ("0" + parseInt(x).toString(16)).slice(-2);
  }
  
  // Check if rgb is null
  if (rgb == null ) {
    // You could repalce the return with a default color, i.e. the line below
    // return "#ffffff"
    return "Error";
  }

  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  
}

#example-wrap div {
  border: 1px solid black;
  width: 100%;
  height: 50px;
  color: black;
}

#example-wrap .background-blue {
  background: blue;
  color: white;
}

#example-wrap .background-white {
  background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="example-wrap">

  <div id="background-set" style="background-color: red; color: white;">Background set in 'style' attribute</div>

  <div id="background-class" class="background-blue">Background set to blue via class</div>

  <div id="background-class" class="background-white">Background set to white via class</div>

  <div id="background-none">No background set</div>

</div>

通过切换类突出显示

此示例使您可以突出显示标记为.highlightable的各个元素，并应用包装程序，这意味着它们的所有子级都可以通过类.highlightable-wrapper突出显示。

// Add click event to highlightable elements and wrappers
$(document).on("click", ".highlightable, .highlightable-wrapper *", function(e) {

  // Toggle highlight class
  $(this).toggleClass("highlight-me");
  
  // Stop click event from propogating (i.e. allow spans to be highlighted individually)
  // Uncomment this if you want propogation
  e.stopPropagation()

});

.highlight-me {
  color: blue;
}

.highlightable-wrapper .highlight-me, .highlightable-wrapper .highlight-me * {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="example-wrapper">

  <div class="highlightable">
    <h4>Individual Element Example</h4>
    This is an exampled of a div with the .highlightable class.
  </div>

  <hr style="margin: 20px 0px;">

  <div class="highlightable-wrapper">
  
    <h4>Wrapper Example</h4>
    
    <p>I am a paragraph within an element with the .highlightable-wrapper class.</p>
    
    <p>Click us to see us change <strong>I am a strong span, you can individually highlight me</strong>.</p>
    
  </div>
  
</div>

以十六进制格式获取DIV的颜色JQuery

3 个答案:

rgb问题演示

通过切换类突出显示