SniperJs css()

SniperJs css() Method

The css() method sets or returns one or more style properties for the selected elements.

Return a CSS Property

To return the value of a specified CSS property, use the following syntax:

css("valid-css-property-name");

The following example will return the background-color value of the FIRST matched element:

Example

sniper.js

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

---

Set a CSS Property

To set a specified CSS property, use the following syntax:

css("valid-css-property-name","value");

The following example will set the background-color value for ALL matched elements:

Example

sniper.js

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

---

Set Multiple CSS Properties

To set multiple CSS properties, use the following syntax:

css({"propertyname":"value", "propertyname":"value", ...});

The following example will set a background-color and a font-size for ALL matched elements:

Example

sniper.js

$("p").css({"background-color": "green", "font-size": "3rem"});

---

CSS-IN-JS

css-in-js just got better with SniperJs.

$('.toast-container > div').css({
    width: '200px', 
    borderRadius: '5px', 
    boxShadow: '3px 10px 20px rgba(112, 188, 255, 0.35)', 
    border: '2px solid', 
    padding: 5, //5px
    transition: 'width 0.5s linear'
}).parentElement.css({
    position: 'absolute',
    bottom: '5%',
    left: 20,
    display: 'none',
    flexDirection: 'column !important',
    gap: '15px',
    alignItems: 'flex-end',
    transition: 'all ease 0.5s'

});

Dynamic calculations / Values

$('.toast-container > div').css({
    width: 30*4, //120px
     boxShadow: `3px 10px 20px ${themeColor}`,
});