jQuery => CSS-manipulation

Syntax

.css (cssProperty) // Få det återgivna CSS-egendomsvärdet
.css ([cssProperty, ...]) // Hämta värden från Array of cssProperties
.css (cssProperty, value) // Ställ in värde
.css ({cssProperty: value, ...}) // Ställ in egenskaper och värden
.css (cssProperty, function) // Exponera cssProperty för en återuppringningsfunktion

Anmärkningar

Återgivna värden

Om en responsiv enhet används (som "auto" , "%" , "vw" etc.) kommer .css() att returnera det faktiska återgivna värdet i px

.myElement{ width: 20%; }

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

Formatera egenskaper och värden

Egenskaper kan definieras med standard CSS-formatering som String eller med camelCase

"margin-bottom"
marginBottom

Värden ska uttryckas i sträng. Numeriska värden behandlas internt som px enheter av jQuery

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

Från och med jQuery 3 .show() undvika att använda .show() och .hide()

Enligt detta jQuery-blogginlägg bör du på grund av omkostnader och prestandaproblem inte längre använda .show() eller .hide() .

Om du har element i ett formatmall som är inställda på att display: none kommer .show() inte längre att åsidosätta det. Så den viktigaste regeln för att flytta till jQuery 3.0 är denna: Använd inte ett stilark för att ställa in standard för display: none och försök sedan använda .show() - eller någon metod som visar element, till exempel. .slideDown() och .fadeIn() - för att synliggöra den. Om du behöver ett element som ska döljas som standard är det bästa sättet att lägga till ett klassnamn som "dold" i elementet och definiera den klassen som ska display: none i ett formatmall. Sedan kan du lägga till eller ta bort den klassen med hjälp av .addClass() och .removeClass() -metoder för att kontrollera synligheten. Alternativt kan du ha ett .ready() hanterarsamtal. .hide() på elementen innan de visas på sidan. Eller, om du verkligen måste behålla stilmallen som standard, kan du använda .css("display", "block") (eller lämpligt visningsvärde) för att åsidosätta stilmallen.

Ställ in CSS-egenskap

Ställer bara in en stil:

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

Ställa in flera stilar samtidigt:

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

Skaffa CSS-egendom

För att få ett elements CSS-egenskap kan du använda .css(propertyName) :

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

Ökning / minskning Numeriska egenskaper

Numeriska CSS-egenskaper kan ökas och dekrementeras med += och -= syntaxen med hjälp av .css() -metoden:

  // 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() getter- funktionen kan tillämpas på varje DOM-element på sidan på följande sätt:

// 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");

Denna rad kommer att returnera den beräknade bredden för det angivna elementet, varje CSS-egenskap som du tillhandahåller inom parentes ger värdet på egenskapen för detta $("selector") DOM-element, om du ber om CSS-attribut som inte finns kommer att undefined som ett svar.

Du kan också ringa CSS-getter med en rad attribut:

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

detta kommer att returnera ett objekt med alla attribut med deras värden:

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

CSS Setter

.css() setter- metoden kan också tillämpas på varje DOM-element på sidan.

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

Detta uttalande ställer in width på $("selector") till 500px och returnerar jQuery-objektet så att du kan kedja fler metoder till den angivna väljaren.

Den .css() setter kan även användas som passerar ett objekt av CSS-egenskaper och värden som:

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

Allt ändrar setter gjort läggs till DOM-elementet style egendom vilket påverkar elementens stilar (om inte den stilen fastighetsvärdet är redan definierat som !important någon annanstans i stilar).

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

jQuery
CSS-manipulation

Sök…