Jaka jest różnica między jQuery .width(), style.width i jQuery .css ("width")?

Question

Jaka jest różnica między wartościami zwracanymi przez .width() z jQuery, .css('width') z jQuery, a atrybutem .style.width w węźle?

Jestem ciekawy, ponieważ próbując ustawić szerokość dwóch komórek tabeli jako równych, pierwsze dwa dały mi tę samą błędną odpowiedź. Co właściwie mierzą i dlaczego nie jest taka sama jak wartość, którą widzę w atrybucie .style, gdy przeglądam element w przeglądarce?

Answer 1

Z width urzędowych dokumentów

Różnica .css (szerokość), a .width() jest fakt, że urządzenie powraca mniej wartości pikseli (na przykład 400), podczas gdy poprzedni zwraca wartość z jednostkami nienaruszonymi (na przykład 400 pikseli). Metoda .width() jest zalecana, gdy w obliczeniach matematycznych należy zastosować szerokość elementu.

Powiedziałbym, nie ma różnicy między .css('width') i .style.with jak css() metoda służy do ustawiania właściwości obiektu stylu.

Różnica między .css('width')/.width() i .style.with jest, że metody jQuery uzyskać styl wyliczone window.getComputedStyle(elem, null). Ta metoda służy do odczytu rzeczywistej właściwości po zastosowaniu CSS i stylów.

Answer 2

.width() da wam, co jest appied .css ('width') da wam to, co jest w atrybucie style

Answer 3

.css ('width') zwraca atrybut z jednostki dołączany chwilę .width() nie, da ci liczbę w pikselach.

Więc jeśli masz element o szerokości 200px .css ('width') zwróci "200px" podczas .width() zwróci 200.

Answer 4

Istnieje również różnica w szerokości "przeznaczone" a rzeczywistej szerokości. .width() da ci szerokość treści elementu, .css ("width") da ci szerokość zgodnie z zamierzeniem arkusza stylów.

Answer 5

Uzupełniając odpowiedź Claudio Redi: patrz różnicę żywo: http://jsfiddle.net/vovkss/kPXaB/

mam używany cm jednostek celowo wykazać, że wyjście .css('width')może być zamienione na piksele (lub innych urządzeń), natomiast .width() jest zawsze liczbą całkowitą reprezentującą liczbę pikseli.

Należy pamiętać, że .style.width dotyczy tylko stylów śródliniowych.

• HTML:

  <div id="mydivInlineStyle" style="width: 10cm"><b>Inline style:</b> 
  </div> 
  
  <div id="mydivExternalStylesheet"><b>External stylesheet:</b> 
  </div> 
  

• CSS:

  div { 
      width: 10cm; 
      border: 10px solid blue; padding: 11px; margin: 12px; 
      background: aqua; white-space: pre; 
  } 
  

• JS:

  $('div').each(function(){ 
      $(this).append(
      'jQuery width(): ' + $(this).width() + "\n" + 
      '.css(\'width\'): ' + $(this).css('width') + "\n" + 
      '.style.width: ' + this.style.width 
  ); 
  }); 
  

• wyjściowa:

  Inline style: 
      jQuery width(): 378 
      .css('width'): 378px 
      .style.width: 10cm 
  
  External stylesheet: 
      jQuery width(): 378 
      .css('width'): 378px 
      .style.width: