如何从css获取十六进制颜色代码并自动显示在div中？

Question

I am designing a color palette for my website. What I'm trying to do is get the color code from the css to the <span class = "hexcode"> hex of css </span> tag

Let me explain: when I set a certain color in the css for example .color.b50 {background: # E9F1FD; } .color.b50 {background: # E9F1FD; } , I want the span tag to automatically acquire the value of .color.b50 to show me as code. This way I would avoid having to manually put the code in the span tag each time.

As I will have many colors this will save me time.

Is it possible to do this with js or jQuery?

 .global-row { display: flex; justify-content: space-between; gap: 20px; } .global-box { display: flex; flex-direction: column; } .label { margin-top: 10px; } .color { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 15px; box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.50); gap: 20px; } /*List of Color*/ .color.b50 { background: #E9F1FD; } .color.b100 { background: #C0D7F9; } .color.b200 { background: #98BDF6; } .color.b300 { background: #6FA4F2; } .color.b400 { background: #478AEF; } .color.b500 { background: #1E70EB; } .color.b600 { background: #1A62CE; } .color.b700 { background: #1754B0; } .color.b800 { background: #134693; } .color.b900 { background: #0F3876; }

 <div class="main-container"> <div class="global-row"> <div class="global-box"> <span class="color b50">50</span> <span class="label">50</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b100">100</span> <span class="label">100</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b200">200</span> <span class="label">200</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b300">300</span> <span class="label">300</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b400">400</span> <span class="label">400</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b500">500</span> <span class="label">500</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b600">600</span> <span class="label">600</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b700">700</span> <span class="label">700</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b800">800</span> <span class="label">800</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b900">900</span> <span class="label">900</span> <span class="hexcode">#000</span> </div> </div> <div class="row-2"> <div class="global-box"> </div> </div> <div class="row-3"> <div class="global-box"> </div> </div> </div>

Answer 1

You can get CSS properties using .css()

However, you only get the background color in rgb, so you have to convert it in hex first. I used the answer of this SO question to convert the data via

const rgb2hex = c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``; .

Finally, loop over your elements and add the generated hex code to the last silbling.

  const $colors = $('.color');

  $colors.each(function(index, elem) {
     let css = rgb2hex($(elem).css("background")).substring(0,7).toUpperCase();
     $(elem).siblings(":last").text(css);
  });

Enjoy.

 const rgb2hex = c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``; $(document).ready(function(){ const $colors = $('.color'); $colors.each(function(index, elem) { let css = rgb2hex($(elem).css("background")).substring(0,7).toUpperCase(); $(elem).siblings(":last").text(css); }); });

 .global-row { display: flex; justify-content: space-between; gap: 20px; } .global-box { display: flex; flex-direction: column; } .label { margin-top: 10px; } .color { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 15px; box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.50); gap: 20px; } /*List of Color*/ .color.b50 { background: #E9F1FD; } .color.b100 { background: #C0D7F9; } .color.b200 { background: #98BDF6; } .color.b300 { background: #6FA4F2; } .color.b400 { background: #478AEF; } .color.b500 { background: #1E70EB; } .color.b600 { background: #1A62CE; } .color.b700 { background: #1754B0; } .color.b800 { background: #134693; } .color.b900 { background: #0F3876; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-container"> <div class="global-row"> <div class="global-box"> <span class="color b50">50</span> <span class="label">50</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b100">100</span> <span class="label">100</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b200">200</span> <span class="label">200</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b300">300</span> <span class="label">300</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b400">400</span> <span class="label">400</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b500">500</span> <span class="label">500</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b600">600</span> <span class="label">600</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b700">700</span> <span class="label">700</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b800">800</span> <span class="label">800</span> <span class="hexcode">#000</span> </div> <div class="global-box"> <span class="color b900">900</span> <span class="label">900</span> <span class="hexcode">#000</span> </div> </div> <div class="row-2"> <div class="global-box"> </div> </div> <div class="row-3"> <div class="global-box"> </div> </div> </div>