Tôi có một javascript đơn giản sử dụng getComputedStyle để đọc màu nền của nó. Nó chuyển đổi rgb thành thập lục phân và xuất ra ở định dạng html.

Javascript:

var elem = document.getElementById("elem-container");
var nền = window.getComputedStyle(elem, null).getPropertyValue("background-color");

hàm rgb2hex(rgb) {
     if ( rgb.search("rgb") == -1 ) {
          trả lại rgb;
     } khác {
          rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/) ;
          hàm hex(x) {
               return ("0" + parsInt(x).toString(16)).slice(-2);
          }
          return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
     }
}

document.getElementById("output").innerHTML = rgb2hex(background);

HTML:

Một số nội dung

  

CSS:

 #elem-container {
   position: absolute;
   left: 0;
   trên cùng: 200px;
   phần đệm: 50px;
   màu nền:#aaaaaa;
   Họ phông chữ: Georgia;
 }

Nhưng khi tôi muốn sử dụng LỚP thay vì ID, tôi sử dụng mã này tôi tìm thấy trên MDN

document.getElementsByClassName

Vì vậy, các biến của tôi trông giống như var elem = document.getElementsByClassName("elem-container");

Tôi đang ở CSS #elem-container Thay đổi thành .elem-container và sẽ id="elem-container" Thay đổi thành class="elem-container" Trong HTML tôi không nhận được bất kỳ kết quả nào, chỉ có khoảng trắng?

Đây là với IDCông việc示例 http://codepen.io/riogrande/pen/MKeqMN

Đây là LỚPkhông hoạt động示例 http://codepen.io/riogrande/pen/qbNJJx

câu trả lời hay nhất

document.getElementById Và document.getElementsByClassName Sự khác biệt:

document.getElementById trả về một phần tử duy nhất, trong khi document.getElementsByClassName Trả về một mảng các phần tử.

var elem = document.getElementsByClassName("elem-container");
var nền = window.getComputedStyle(elem, null).getPropertyValue("background-color"); 
// điều này sẽ thất bại, vì elem là một mảng

Bạn có thể chỉ cần chọn phần tử đầu tiên của mảng và nó sẽ hoạt động - nhưng có những nhược điểm khác (ví dụ: bạn không biết liệu có phần tử nào không hoặc nếu có nhiều phần tử, bạn hãy chọn đúng phần tử).

var elem = document.getElementsByClassName("elem-container")[0];

Cho phép giống hệt nhau lớp họcNhiều phần tử của -name. Id - Tên phải là duy nhất. Đó là lý do tại sao các bộ chọn này trả về một phần tử đơn ("phải là duy nhất") hoặc một mảng ("yêu cầu các phần tử 0-n").

Về việc JavaScript không thể có được kiểu được tính toán của một lớp, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/34422881/