Cách lấy màu nền của phần tử bằng javascript?

Làm thế nào tôi có thể nhận được màu nền của bất kỳ phần tử nào, nói Div, sử dụng javascript. Tôi cố gắng: -Cách lấy màu nền của phần tử bằng javascript?

<html> 
    <body> 
     <div id="myDivID" style="background-color: red">shit happens</div> 
     <input type="button" value="click me" onclick="getColor();"> 
    </body> 

    <script type="text/javascript"> 
     function getColor(){ 
      myDivObj = document.getElementById("myDivID") 
      if (myDivObj){ 
       alert ('myDivObj.bgColor: ' + myDivObj.bgColor); // shows: undefined 
       alert ('myDivObj.backgroundcolor: ' + myDivObj.backgroundcolor); // shows: undefined 
       //alert ('myDivObj.background-color: ' + myDivObj.background-color); // this is not a valid property :) 
       alert ('style:bgColor: ' + getStyle (myDivObj, 'bgColor')); //shows: undefined 
       alert ('style:backgroundcolor: ' + getStyle (myDivObj, 'backgroundcolor')); // shows:undefined: 
       alert ('style:background-color: ' + getStyle (myDivObj, 'background-color')); // shows: undefined 
      }else{ 
       alert ('damn'); 
      } 
     } 
     /* copied from `QuirksMode` - http://www.quirksmode.org/dom/getstyles.html - */ 
     function getStyle(x,styleProp) 
     { 
      if (x.currentStyle) 
       var y = x.currentStyle[styleProp]; 
      else if (window.getComputedStyle) 
       var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); 
      return y; 
     } 
    </script> 
</html>

Nguồn

2009-12-11 Rakesh Juyal

Lưu ý rằng (hiện tại) chấp nhận câu trả lời sẽ chỉ làm việc dưới một tập rất hạn chế của hoàn cảnh. – NickFitz

Như với tất cả các thuộc tính css có chứa dấu gạch nối, tên tương ứng của họ trong JS là để loại bỏ các gạch nối và làm cho vốn lá thư sau đây: backgroundColor

alert(myDiv.style.backgroundColor);

Nguồn

2009-12-11 10:18:52

Chết tiệt! Điều đó thật dễ dàng :) –

David, bạn sẽ vui lòng cho tôi biết tại sao 'getStyle' được sử dụng trong' http: // www.quirksmode.org/dom/getstyles.html', khi việc lấy thuộc tính phong cách thật dễ dàng. –

cũng là trang bạn liên kết để có một số mô tả trong chính nó như những gì nó tốt cho. Ví dụ, đối với mozilla, nó sử dụng 'getComputedStyle', không phải là quá nhiều thứ được chỉ định trong biểu định kiểu, mà đúng hơn là, những gì xảy ra sẽ được hiển thị, cả hai đều là kết quả của việc đánh dấu HTML * và * Kiểu CSS. Đối với một cái gì đó đơn giản như kịch bản này, mặc dù, tôi không thấy bất kỳ lý do thực sự tốt để sử dụng chức năng đó. –

Sử dụng JQuery:

var color = $('#myDivID').css("background-color");

Nguồn

2009-12-11 10:19:54 Aziz

div trước khi chọn id là một chút dư thừa – AutomatedTester

Tôi đồng ý, đã sửa :) – Aziz

+14

tải xuống và thực thi thư viện 20kb để truy xuất màu nền của DIV là một chút dư thừa;) –

Nó phụ thuộc vào phong cách nào từ div bạn cần. Đây có phải là kiểu nền được xác định trong CSS hoặc kiểu nền được thêm thông qua javascript (nội tuyến) vào nút hiện tại không?

Trong trường hợp kiểu CSS, bạn nên sử dụng kiểu được tính toán. Giống như bạn làm trong getStyle.

Với kiểu nội tuyến, bạn nên sử dụng tham chiếu node.style: x.style.backgroundColor;

Cũng lưu ý rằng bạn chọn kiểu bằng cách sử dụng tham chiếu CamelCase/non hyphen, vì vậy không phải background-color, nhưng backgroundColor;

Nguồn

2009-12-11 10:24:11 nemisj

Với jQuery:

jQuery('#myDivID').css("background-color");

Với nguyên mẫu:

$('myDivID').getStyle('backgroundColor');

Với JS tinh khiết:

document.getElementById("myDivID").style.backgroundColor

Nguồn

2009-12-11 11:18:01 user228807

btw, kiểm tra các tiếp theo ing getElementsByClassName thực hiện chức năng so sánh sử dụng: http://ejohn.org/blog/getelementsbyclassname-in-firefox-3/

Nguồn

2011-12-28 20:47:42 nadavkav

Nhận ở vị trí thứ:

window.getComputedStyle(*Element* , null).getPropertyValue(*CSS*);

Ví dụ:

window.getComputedStyle(document.body ,null).getPropertyValue('background-color'); 
window.getComputedStyle(document.body ,null).getPropertyValue('width'); 
~ document.body.clientWidth

Nguồn

2014-09-23 09:44:03 phnghue

Cách lấy màu nền của phần tử bằng javascript?

Trả lời

Các vấn đề liên quan