blocks|key|2966946|text|检查下面的示例链接，然后单击div以获取十六进制的颜色值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2966947|​|2966948|var+color+=+'';
$('div').click(function()+{
++var+x+=+$(this).css('backgroundColor');
++hexc(x);
++console.log(color);
})

function+hexc(colorval)+{
++var+parts+=+colorval.match(/%5Ergb$(\d%2B),\s*(\d%2B),\s*(\d%2B)$$/);
++delete(parts[0]);
++for+(var+i+=+1;+i+<=+3;+%2B%2Bi)+{
++++parts[i]+=+parseInt(parts[i]).toString(16);
++++if+(parts[i].length+==+1)+parts[i]+=+'0'+%2B+parts[i];
++}
++color+=+'#'+%2B+parts.join('');
}|code-block|syntax|javascript|2966949|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div+class='div'+style='background-color:+#f5b405'>Click+me!</div>|2966950|2966951|+的检查工作示例|offset|length|style|BOLD|2966952|entityMap^0|0|0|0|0|0|2|6|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|Y|8|@$N|Z|O|10|P|Q]]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>Check example link below and click on the div to get the color value in hex. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var color = '';
$('div').click(function() {
  var x = $(this).css('backgroundColor');
  hexc(x);
  console.log(color);
})

function hexc(colorval) {
  var parts = colorval.match(/^rgb$(\d+),\s*(\d+),\s*(\d+)$$/);
  delete(parts[0]);
  for (var i = 1; i &lt;= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
  }
  color = '#' + parts.join('');
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class='div' style='background-color: #f5b405'&gt;Click me!&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>Check working example at <a href="http://jsfiddle.net/DCaQb/" rel="nofollow noreferrer">http://jsfiddle.net/DCaQb/</a></strong></p>


blocks|key|3180790|text|这里有一些技巧，因为在设置strokeStyle和fillStyle等特定属性时，HTML5画布需要解析颜色值：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3180791|var+ctx+=+document.createElement('canvas').getContext('2d');
ctx.strokeStyle+=+'rgb(64,+128,+192)';
var+hexColor+=+ctx.strokeStyle;|code-block|syntax|javascript|3180792|entityMap^0|D|B|P|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>There's a bit of a hack for this, since the HTML5 canvas is required to parse color values when certain properties like <code>strokeStyle</code> and <code>fillStyle</code> are set:</p>

<pre><code>var ctx = document.createElement('canvas').getContext('2d');
ctx.strokeStyle = 'rgb(64, 128, 192)';
var hexColor = ctx.strokeStyle;
</code></pre>


blocks|key|268890|text|function+getBackgroundColor($dom)+{
++++var+bgColor+=+"";
++++while+($dom[0].tagName.toLowerCase()+!=+"html")+{
++++++bgColor+=+$dom.css("background-color");
++++++if+(bgColor+!=+"rgba(0,+0,+0,+0)"+&&+bgColor+!=+"transparent")+{
++++++++break;
++++++}
++++++$dom+=+$dom.parent();
++++}
++++return+bgColor;
++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|268891|在Chrome和Firefox下正常工作|unstyled|268892|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>function getBackgroundColor($dom) {
    var bgColor = "";
    while ($dom[0].tagName.toLowerCase() != "html") {
      bgColor = $dom.css("background-color");
      if (bgColor != "rgba(0, 0, 0, 0)" &amp;&amp; bgColor != "transparent") {
        break;
      }
      $dom = $dom.parent();
    }
    return bgColor;
  }
</code></pre>

<p>working properly under Chrome and Firefox</p>


blocks|key|2966877|text|你有了你需要的颜色，你只需要把它转换成你想要的格式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2966878|这里有一个脚本可以做到这一点：http://www.phpied.com/rgb-color-parser-in-javascript/|offset|length|2966879|entityMap|0|LINK|mutability|MUTABLE|url|http://www.phpied.com/rgb-color-parser-in-javascript/^0|0|F|1H|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>You have the color you just need to convert it into the format you want.</p>

<p>Here's a script that should do the trick: <a href="http://www.phpied.com/rgb-color-parser-in-javascript/" rel="noreferrer">http://www.phpied.com/rgb-color-parser-in-javascript/</a></p>


blocks|key|266784|text|事实上，如果在某些元素下没有定义background-color，Chrome会将其background-color输出为rgba(0,+0,+0,+0)，而Firefox输出为transparent。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|266785|entityMap^0|G|G|16|G|1P|G|2H|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

<p>In fact, if there is no definition of <code>background-color</code> under some element, Chrome will output its <code>background-color</code> as <code>rgba(0, 0, 0, 0)</code>, while Firefox outputs is <code>transparent</code>.</p>


blocks|key|272417|text|我漂亮的非标准解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|272418|HTML|offset|length|style|BOLD|272419|<div+style="background-color:#f5b405"></div>|code-block|syntax|javascript|272420|jQuery|272421|$(this).attr("style").replace("background-color:",+"");|272422|结果|272423|#f5b405|272424|entityMap^0|0|0|4|0|0|0|6|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|S|3|T|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|U|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|V|$]]

<p>My beautiful non-standard solution</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div style="background-color:#f5b405"&gt;&lt;/div&gt;
</code></pre>

<p><strong>jQuery</strong></p>

<pre><code>$(this).attr("style").replace("background-color:", "");
</code></pre>

<p><strong>Result</strong></p>

<pre><code>#f5b405
</code></pre>


blocks|key|2967056|text|添加@Newred解决方案。如果你的风格不仅仅是background-color，你可以使用下面的代码：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2967057|$(this).attr('style').split(';').filter(item+=>+item.startsWith('background-color'))[0].split(":")[1]|code-block|syntax|javascript|2967058|entityMap^0|O|G|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Adding on @Newred solution.
If your style has more than just the <code>background-color</code> you can use this:</p>

<pre><code>$(this).attr('style').split(';').filter(item =&gt; item.startsWith('background-color'))[0].split(":")[1]
</code></pre>


blocks|key|270474|text|这个解决方案利用了@Newred和@Radu+Diță所说的部分内容。但在不太标准的情况下会起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|270475|+$(this).attr('style').split(';').filter(item+=>+item.startsWith('background-color'))[0].split(":")[1].replace(/\s/g,+'');|code-block|syntax|javascript|270476|它们都有的问题是都没有检查背景颜色和颜色之间的空格。|270477|所有这些都将与上面的代码匹配。|270478|+background-color:+#ffffff
+background-color:++++++#fffff;
+background-color:#fffff;|270479|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This Solution utilizes part of what @Newred and @Radu Diță said.  But will work in less standard cases.</p>

<pre><code> $(this).attr('style').split(';').filter(item =&gt; item.startsWith('background-color'))[0].split(":")[1].replace(/\s/g, '');
</code></pre>

<p>The issue both of them have is that neither check for a space between background-color:  and the color. </p>

<p>All of these will match with the above code.</p>

<pre><code> background-color: #ffffff
 background-color:      #fffff;
 background-color:#fffff;
</code></pre>


<p>How do I get the background color code of an element?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>console.log($(".div").css("background-color"));</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="div" style="background-color: #f5b405"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>What I want</strong></p>

<pre><code>#f5b405
</code></pre>


How to get the background color code of an element in hex?

jQuery

HTML5

如何获取元素的背景颜色代码？​console.log($(".div").css("background-color"));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="div" style="background-color: #f5b405

问如何获取十六进制元素的背景颜色代码？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获取十六进制元素的背景颜色代码？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获取十六进制元素的背景颜色代码？
EN