jQuery => CSS-manipulatie

Syntaxis

.css (cssProperty) // Haal de gerenderde CSS-eigenschapswaarde op
.css ([cssProperty, ...]) // Haal waarden op uit Array of cssProperties
.css (cssProperty, value) // Waarde instellen
.css ({cssProperty: value, ...}) // Eigenschappen en waarden instellen
.css (cssProperty, functie) // Stel cssProperty bloot aan een callback-functie

Opmerkingen

Weergegeven waarden

Als een responsieve eenheid wordt gebruikt (zoals "auto" , "%" , "vw" enz.), Retourneert .css() de werkelijke gerenderde waarde in px

.myElement{ width: 20%; }

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

Eigenschappen en waarden opmaken

Eigenschappen kunnen worden gedefinieerd met behulp van standaard CSS-opmaak als String of met camelCase

"margin-bottom"
marginBottom

Waarden moeten worden uitgedrukt in String. Numerieke waarden worden intern behandeld als px eenheden door jQuery

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

Gebruik .show() jQuery 3 het gebruik van .show() en .hide()

Volgens dit jQuery-blogbericht zou je vanwege overhead- en prestatieproblemen niet langer .show() of .hide() .

Als u elementen in een stijlblad hebt die zijn ingesteld om display: none te display: none , zal de .show() methode dit niet langer overschrijven. Dus de belangrijkste regel voor het verplaatsen naar jQuery 3.0 is deze: gebruik geen stylesheet om de standaardweergave in display: none en probeer dan .show() - of een methode die elementen toont, zoals .slideDown() en .fadeIn() - om het zichtbaar te maken. Als u standaard een element wilt verbergen, kunt u het beste een klassennaam als "verborgen" aan het element toevoegen en die klasse definiëren om weer te display: none in een stylesheet. Vervolgens kunt u die klasse toevoegen of verwijderen met de .addClass() en .removeClass() van jQuery om de zichtbaarheid te regelen. U kunt ook een .ready() -handler aanroepen .hide() op de elementen voordat ze op de pagina worden weergegeven. Of, als u echt de standaardpagina van de stylesheet wilt behouden, kunt u .css("display", "block") (of de juiste displaywaarde) gebruiken om de stylesheet te overschrijven.

Stel CSS-eigenschap in

Slechts één stijl instellen:

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

Meerdere stijlen tegelijkertijd instellen:

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

Krijg CSS-eigendom

Om de CSS-eigenschap van een element te krijgen, kunt u de methode .css(propertyName) gebruiken:

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

Numerieke eigenschappen verhogen / verlagen

Numerieke CSS-eigenschappen kunnen worden verhoogd en verlaagd met respectievelijk de syntaxis += en -= met de methode .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 en Setters

CSS Getter

De .css() getter functie kan worden toegepast op elk DOM-element op de pagina als volgt uit:

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

Deze regel retourneert de berekende breedte van het opgegeven element. Elke CSS-eigenschap die u tussen haakjes opgeeft, levert de waarde van de eigenschap op voor dit $("selector") DOM-element, als u om een CSS-kenmerk vraagt dat niet bestaat wordt als antwoord undefined .

Je kunt ook de CSS-getter met een reeks attributen aanroepen:

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

dit retourneert een object van alle attributen met hun waarden:

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

CSS-setter

De .css() setter- methode kan ook worden toegepast op elk DOM-element op de pagina.

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

Met deze instructie wordt de width van de $("selector") op 500px en wordt het jQuery-object geretourneerd, zodat u meer methoden aan de opgegeven selector kunt koppelen.

De .css() -setter kan ook worden gebruikt voor het doorgeven van een object met CSS-eigenschappen en waarden zoals:

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

Alle verandert de setter gemaakt worden toegevoegd aan het DOM-element style eigendom aldus stijlen van de elementen die van invloed (tenzij die stijl waarde van de eigenschap al wordt gedefinieerd als !important ergens anders in stijlen).

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

jQuery
CSS-manipulatie

Zoeken…