Getting / Setting CSS Props - JsPlayground 2022

AJAX

Basics

Data

custom attributes

DOM

Effects

Events

Forms

jQuery UI

slider example

Plug Ins

Traversing

jQuery - Getting / Setting CSS Props

Return a CSS Property
To return the value of a specified CSS property, use the following syntax: css("propertyname");

The following example will return the color value of the element.

Hello World

Get the font color of demo1:


let colorValue = $("#HelloWorldHeader").css("color");
$("#GetCssButton").click(function () { $("#results").html(colorValue); });

Set a CSS Property
To set the value of a specified CSS property, use the following syntax: css("property name","property value");

Hello World


    $("#SetCSSButton").click(function () { $("#HelloWorldHeader2").css("font-size", "50px"); });

You can also set multiple CSS properties like so:

Hello World

Notice we use a js object to do this.


$("#SetMultiplePropsButton").click(function ()
{
    $("#HelloWorldHeader3").css({
        "font-size": "10px",
        "font-weight": "bold",
        "text-decoration": "underline"
    });
});