Hoe kan ik CSS wijzigen met jQuery?

$(init);
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({ "backgroundColor": "black", "color": "white" });
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

Antwoord 2, autoriteit 26%

Je kunt het volgende doen:

$("h1").css("background-color", "yellow");

Of:

$("h1").css({backgroundColor: "yellow"});

Antwoord 3, autoriteit 11%

Om de zaken een beetje op te helderen, aangezien sommige antwoorden onjuiste informatie geven:

De jQuery .css()-methode staat het gebruik van DOM- of CSS-notatie in veel gevallen. Dus zowel backgroundColorals background-colorzullen de klus klaren.

Bovendien, als je .css()aanroept met argumenten, heb je twee keuzes wat de argumenten kunnen zijn. Dit kunnen twee door komma’s gescheiden tekenreeksen zijn die een css-eigenschap en zijn waarde vertegenwoordigen, of het kan een Javascript-object zijn dat een of meer sleutelwaardeparen van CSS-eigenschappen en -waarden bevat.

Concluderend is het enige wat er mis is met je code een ontbrekende }. De regel zou moeten luiden:

$("#myParagraph").css({"backgroundColor":"black","color":"white"});

Je kunt de accolades niet weglaten, maar je mag de aanhalingstekens rond backgroundColoren colorweglaten. Als je background-colorgebruikt, moet je er aanhalingstekens omheen zetten vanwege het koppelteken.

Over het algemeen is het een goede gewoonte om uw Javascript-objecten te citeren, omdat er problemen kunnen ontstaan als u geen bestaande zoekwoord.

Een laatste opmerking is dat over de jQuery .ready()methode

$(handler);

is synoniemmet:

$(document).ready(handler);

evenals met een derde niet aanbevolen vorm.

Dit betekent dat $(init)helemaal correct is, aangezien initin dat geval de handler is. Dus initwordt geactiveerd wanneer de DOM wordt gemaakt.

Antwoord 4, autoriteit 4%

Als je de eigenschap Multiple CSS gebruikt met jQuery, dan moet je de accolade gebruiken in het begin en aan het einde. Je mist de eindigende accolade.

function init() {
 $("h1").css("backgroundColor", "yellow");
 $("#myParagraph").css({"background-color":"black","color":"white"});
 $(".bordered").css("border", "1px solid black");
}

Je kunt deze jQuery CSS Selector-zelfstudiebekijken.

Antwoord 5, Autoriteit 4%

De .css()-methode maakt het super eenvoudig om CSS-eigenschappen te vinden en in te stellen en in combinatie met andere methoden zoals .Animate (), u kunt een aantal coole effecten op uw site maken.

In zijn eenvoudigste vorm kan de .css()-methode een enkele CSS-eigenschap instellen voor een bepaalde set van overeenkomende elementen. U passeert gewoon het eigendom en de waarde als snaren en de CSS-eigenschappen van het element zijn gewijzigd.

$('.example').css('background-color', 'red');

Hierdoor zou dit de eigenschap ‘achtergrondkleur’ ​​instellen voor ‘rood’ voor elk element dat de klasse van ‘voorbeeld’ had.

Maar u bent niet beperkt tot gewoon één pand per keer wijzigen. Natuurlijk, je kunt een aantal identieke jQuery-objecten toevoegen, elk verandert slechts één eigenschap per keer, maar dit maakt verschillende, onnodige oproepen naar de Dom en is veel herhaalde code.

In plaats daarvan kunt u de .css()methode een JavaScript-object doorgeven die de eigenschappen en waarden bevat als sleutel / waardeparen. Op deze manier wordt elke eigenschap vervolgens op het jQuery-object in één keer ingesteld.

$('.example').css({
    'background-color': 'red',
    'border' : '1px solid red',
    'color' : 'white',
    'font-size': '32px',
    'text-align' : 'center',
    'display' : 'inline-block'
});

Hiermee wordt al deze CSS-eigenschappen veranderd op de elementen ‘.Example’.

Antwoord 6, Autoriteit 2%

If you have one css:
   $("p").css("background-color": "pink");
If you have more than one css: 
  $("p").css({"background-color": "pink", "font-size": "200%"});
Or you can use:
var style ="background-color:red;";
$("p").attr("style", style);

Antwoord 7

Ik wilde alleen toevoegen dat wanneer je getallen gebruikt voor waarden met de css-methode, je ze buiten de apostrof moet toevoegen en vervolgens de CSS eenheidin apostrofs moet toevoegen.

$('.block').css('width',50 + '%');

of

var $block = $('.block')    
$block.css({ 'width': 50 + '%', 'height': 4 + 'em', 'background': '#FFDAB9' });

Antwoord 8

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
         $('h1').css('color','#3498db');
      });
    </script>
    <style>
      .wrapper{
        height:450px;
        background:#ededed;
        text-align:center
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1>Title</h1>
    </div>
  </body>
</html>

Antwoord 9

$(“.radioValue”).css({“background-color”:”-webkit-linear-gradient(#e9e9e9,rgba(255, 255, 255, 0.43137254901960786),#e9e9e9)”,”color” :”#454545″, “padding”: “8px”});

Antwoord 10

$(function(){ 
$('.bordered').css({
"border":"1px solid #EFEFEF",
"margin":"0 auto",
"width":"80%"
});
$('h1').css({
"margin-left":"10px"
});
$('#myParagraph').css({
"margin-left":"10px",
"font-family":"sans-serif"
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
<h1>Header</h1>
<p id="myParagraph">This is some paragraph text</p>
</div>

$("#myParagraph").css({"background-color":"black","color":"white"});