prihlasenyprihlasit | registrovat

.css()

kategorie: CSS

.css(propertyName) vráti: String

Vráti hodnotu vlastnosti style prvého z vybraných elementov.

.css() metóda je pohodlný spôsob, ako získať vlastnosť style prvého z vybraných elementov, vzhľadom na rozdielne špecifikácie (getComputedStyle() metóda štandardných prehliadačov vs currentStyle a runtimeStyle vlastnosti Internet Explorera) a odlišné pojmy prehliadačov pre niektoré vlastnosti. Napríklad, DOM implementácia Internet Explorera interpretuje float vlastnosť ako styleFloat, zatiaľ čo W3C-standard prehliadače ho interpretujú ako cssFloat. Metóda .css() vzhľadom na tieto rozdiely produkuje rovnaký výsledok bez ohľadu na pojem aký používa. Napríklad element, ktorý má ľavý float, vráti reťazec left pre každý z týchto riadkov:

$('div.left').css('float');
$('div.left').css('cssFloat');
$('div.left').css('styleFloat');

jQuery tiež rovnako interpretuje CSS a DOM formátovanie vlastnosti multiple-word. Napríklad, jQuery chápe a vráti správne hodnoty pre .css('background-color') a .css('backgroundColor')

Skrátené CSS vlastnosti (napríklad margin, background, border) niesu podporované. Napríklad, ak chcete vedieť margin, použite: $(elem).css('marginTop'), $(elem).css('marginRight'), atď...

Priklady:

Pre ziskanie farby pozadia kliknite na div.
 <!DOCTYPE html>
<html>
  <head>
    <style>
      div { width:60px; height:60px; margin:5px; float:left; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
    <span id="result">&nbsp;</span>
    <div style="background-color:blue;"></div>
    <div style="background-color:rgb(15,99,30);"></div>

    <div style="background-color:#123456;"></div>
    <div style="background-color:#f11;"></div>
    <script>
      $("div").click(function () {
        var color = $(this).css("background-color");
        $("#result").html("That div is <span style='color:" + color + ";'>" + color + "</span>.");
      });
    </script>
  </body>
</html>

.css(propertyName, value) vráti: jQuery

Nastaví jednu alebo viac CSS vlastností pre vybrané elementy.

Rovnako ako u .prop() metódy, .css() metóda umožňuje nastavenie vlastnosti elementu rýchlo a jednoducho. Táto metóda môže mať buď názov vlastnosti a hodnotu ako samostatné parametre alebo jednoduché páry kľúčových vlastností (notácia JavaScript objektu).

jQuery tiež rovnako interpretuje CSS a DOM formátovanie vlastnosti multiple-word. Napríklad jQuery chápe a vráti správne hodnotu pre .css({'background-color': '#ffe', 'border-left': '5px solid #ccc'}) a .css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'}). Všimnite si ohľadom notácia DOM, že úvodzovky okolo názvu vlastností sú nepovinné, ale v spojení s CSS notáciou sú nutné práve kvôli pomlčke v názve.

Pri použití .css(), jQuery modifikuje style vlastnosť elementu. Napríklad ('#mydiv').css('color', 'green') je ekvivalentom k document.getElementById('mydiv').style.color = 'green'. Nastavenie hodnoty style vlastnosti na prázdny reťazec - napr. $('#mydiv').css('color', '') - odstráni túto vlastnosť, ak je pridaná, či už v HTML style atribúte prostredníctvom jQuery .css() metódy, alebo prostredníctvom priamej DOM manipulácie style vlastnosti. To však neodstráni style, ktorý bol pridaný cez CSS stylesheet alebo <style>.

Od jQuery 1.6, .css() prijíma relatívne hodnoty podobne ako .animate(). Relatívne hodnoty sú reťazec začínajúci += alebo -=, pre zvýšenie alebo zníženie aktuálnej hodnoty. Napríklad, ak padding-left elementu bol 10px .css( "padding-left", "+=15" ) bude mať vo výsledku 25px padding-left.

Od jQuery 1.4, .css() umožňuje podať funkciu ako hodnotu vlastnosti:

$('div.example').css('width', function(index) {
   return index * 50;
});

Priklady:

Pre ziskanie farby pozadia kliknite na div.
 <!DOCTYPE html>
<html>
  <head>
    <style>
      div { width:60px; height:60px; margin:5px; float:left; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
    <span id="result">&nbsp;</span>
    <div style="background-color:blue;"></div>
    <div style="background-color:rgb(15,99,30);"></div>

    <div style="background-color:#123456;"></div>
    <div style="background-color:#f11;"></div>
    <script>
      $("div").click(function () {
        var color = $(this).css("background-color");
        $("#result").html("That div is <span style='color:" + color + ";'>" + color + "</span>.");
      });
    </script>
  </body>
</html>

API

© 2009 Shaddow admin hosting od VIPHosting

▲