jQuery => Manipulacja CSS

Składnia

.css (cssProperty) // Uzyskaj wartość renderowanej właściwości CSS
.css ([cssProperty, ...]) // Uzyskaj wartości z tablicy cssProperties
.css (cssProperty, wartość) // Ustaw wartość
.css ({cssProperty: wartość, ...}) // Ustaw właściwości i wartości
.css (cssProperty, funkcja) // Wystaw cssProperty na funkcję wywołania zwrotnego

Uwagi

Renderowane wartości

Jeśli używana jest jednostka responsywna (np. "auto" , "%" , "vw" itp.), .css() zwróci rzeczywistą renderowaną wartość w px

.myElement{ width: 20%; }

var width = $(".myElement").css("width"); // "123px"

Formatowanie właściwości i wartości

Właściwości mogą być zdefiniowane przy użyciu standardowego formatowania CSS jako String lub przy użyciu camelCase

"margin-bottom"
marginBottom

Wartości powinny być wyrażone w postaci ciągu. Wartości liczbowe są wewnętrznie traktowane jako jednostki px przez jQuery

.css(fontSize: "1em")
.css(fontSize: "16px")
.css(fontSize: 16)      // px will be used

Począwszy od jQuery 3, unikaj używania .show() i .hide()

Zgodnie z tym postem na blogu jQuery , ze względu na koszty ogólne i problemy z wydajnością, nie powinieneś już używać .show() ani .hide() .

Jeśli masz elementy w arkuszu stylów ustawione do display: none , metoda .show() nie będzie już nadpisywać tego. Zatem najważniejszą zasadą przejścia do jQuery 3.0 jest: Nie używaj arkusza stylów do ustawiania domyślnego display: none a następnie spróbuj użyć .show() - lub dowolnej metody, która pokazuje elementy, takie jak .slideDown() i .fadeIn() - aby był widoczny. Jeśli potrzebujesz domyślnie ukryć element, najlepszym sposobem jest dodanie do elementu nazwy klasy, takiej jak „ukryty” i zdefiniowanie klasy, która ma być display: none w arkuszu stylów. Następnie możesz dodać lub usunąć tę klasę za pomocą .addClass() i .removeClass() jQuery w celu kontroli widoczności. Alternatywnie możesz wywołać funkcję .ready() handlera .hide() na elementach, zanim zostaną wyświetlone na stronie. Lub, jeśli naprawdę musisz zachować domyślny arkusz stylów, możesz użyć .css("display", "block") (lub odpowiedniej wartości wyświetlania), aby zastąpić arkusz stylów.

Ustaw właściwość CSS

Ustawienie tylko jednego stylu:

$('#target-element').css('color', '#000000');

Ustawianie wielu stylów jednocześnie:

$('#target-element').css({
    'color': '#000000',
    'font-size': '12pt',
    'float': 'left',
});

Uzyskaj właściwość CSS

Aby uzyskać właściwość CSS elementu, możesz użyć metody .css(propertyName) :

var color    = $('#element').css('color');
var fontSize = $('#element').css('font-size');

Zwiększanie / zmniejszanie właściwości numerycznych

Numeryczne właściwości CSS można zwiększać i zmniejszać za pomocą odpowiednio składni += i -= , używając metody .css() :

  // Increment using the += syntax
  $("#target-element").css("font-size", "+=10");
  
  // You can also specify the unit to increment by
  $("#target-element").css("width", "+=100pt");
  $("#target-element").css("top", "+=30px");
  $("#target-element").css("left", "+=3em");
  
  // Decrementing is done by using the -= syntax
  $("#target-element").css("height", "-=50pt");

CSS - Getters and Setters

CSS Getter

.css() funkcja pochłaniacza może być stosowany do każdego elementu DOM na stronie tak:

// Rendered width in px as a string. ex: `150px`
// Notice the `as a string` designation - if you require a true integer, 
// refer to `$.width()` method
$("body").css("width");

Ta linia zwróci obliczoną szerokość określonego elementu, każda właściwość CSS podana w nawiasach zwróci wartość właściwości dla tego elementu DOM $("selector") , jeśli poprosisz o atrybut CSS, który nie istnieje stanie się undefined jako odpowiedź.

Możesz także wywołać moduł pobierający CSS z szeregiem atrybutów:

$("body").css(["animation","width"]);

to zwróci obiekt wszystkich atrybutów wraz z ich wartościami:

Object {animation: "none 0s ease 0s 1 normal none running", width: "529px"}

Seter CSS

.css() ustawiającą .css() można również zastosować do każdego elementu DOM na stronie.

$("selector").css("width", 500);

Ta instrukcja ustawia width $("selector") na 500px i zwraca obiekt jQuery, aby można było 500px więcej metod z określonym selektorem.

.css() ustawiająca można również przekazanie obiektu właściwości CSS i wartości takich jak:

$("body").css({"height": "100px", width:100, "padding-top":40, paddingBottom:"2em"});

Wszystkie zmiany dokonane przez narzędzie ustawiające są dodawane do właściwości style elementu DOM, wpływając w ten sposób na style elementów (chyba że ta wartość właściwości stylu jest już zdefiniowana jako !important gdzieś indziej w stylach).

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

jQuery
Manipulacja CSS

Szukaj…