1. Dom
  2. Pytanie i odpowiedź
  3. Jak uzyskać kolor tła elementu za pomocą javascript?

Jak uzyskać kolor tła elementu za pomocą javascript?

2009-12-11 27 views
33

Jak mogę uzyskać kolor tła dowolnego elementu, na przykład Div, używając javascript. Próbowałem: -Jak uzyskać kolor tła elementu za pomocą 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>

Źródło

2009-12-11 Rakesh Juyal

+6

Zauważ, że (obecnie) przyjął odpowiedź będzie działać tylko w bardzo ograniczonym zestawem okoliczności. – NickFitz

Odpowiedz

32

jak wszystkie właściwości CSS, które zawierają łączniki, odpowiadające im nazwy w JS jest usunięcie myślnika i wykonać następujące litera: backgroundColor

alert(myDiv.style.backgroundColor);

Źródło

2009-12-11 10:18:52

+1

Cholera! to było takie proste :) –

+0

David, proszę, daj mi znać, dlaczego 'getStyle' jest używany w' http: // www.quirksmode.org/dom/getstyles.html', kiedy było tak łatwo uzyskać właściwość stylu. –

+0

Strona, do której prowadzi link, ma pewne opisy, które są dla niej dobre. dla mozilli, na przykład, używa 'getComputedStyle', która nie jest tak bardzo określona w arkuszu stylów, ale raczej, co się dzieje, zarówno w wyniku znaczników HTML *, jak i * CSS. Jednak dla czegoś tak prostego jak ten scenariusz nie widzę żadnego dobrego powodu, aby korzystać z tej funkcji. –

2

Korzystanie JQuery:

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

Źródło

2009-12-11 10:19:54 Aziz

+0

div przed selektorem id jest trochę zbędny – AutomatedTester

+0

Zgadzam się, naprawiłem :) – Aziz

+14

pobranie i wykonanie biblioteki 20kb do pobrania koloru tła DIV jest trochę zbędne;) –

11

Zależy jaki styl od div potrzebujesz. Czy jest to styl tła, który został zdefiniowany w CSS lub stylu tła, który został dodany przez javascript (inline) do bieżącego węzła?

W przypadku stylu CSS należy użyć stylu obliczeniowego. Tak jak w przypadku getStyle.

W stylu inline powinieneś użyć numeru node.style: x.style.backgroundColor;

Należy również zauważyć, że wybierasz styl za pomocą odniesienia CamelCase/non łącznika, więc nie background-color, ale backgroundColor;

Źródło

2009-12-11 10:24:11 nemisj

13

z jQuery:

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

Z prototype:

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

Z czystym JS:

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

Źródło

2009-12-11 11:18:01 user228807

31

uzyskać pod numerem:

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

Przykład:

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

Źródło

2014-09-23 09:44:03 phnghue

Powiązane problemy

 Powiązane problemy