How to Change CSS Using Jquery

Change CSS variable using jQuery

You may change the css variable using plain JavaScript elem.style.setProperty("variableName", "variableProp");

$("html").on('click', function() {    $("body").get(0).style.setProperty("--color", "hotpink");  });

body {  --color: blue;  background-color: var(--color);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me!

How to change css of element using jquery

Just use:

$('#button1').click(
    function(){
        $('#myEltId span').css('border','0 none transparent');
    });

Or, if you prefer the long-form:

$('#button1').click(
    function(){
        $('#myEltId span').css({
            'border-width' : '0',
            'border-style' : 'none',
            'border-color' : 'transparent'
        });
    });

And, I'd strongly suggest reading the API for css() (see the references, below).

References:

css().

Change css class content with JQuery

You can use two different css file and switch the URL in link tag on an event.

<link rel="shortcut icon" href="FIRST_CSS_FILE_URL">


$('button').click(function() {
    $('link').attr('href', SECOND_CSS_FILE_URL)   
})

How to change css property name using jQuery?

If you mean you want to change left:0 to right:0 and left:230 to right:230 (side note: they'll need units, like px), then you need to read the original value, then write the new value and clear the original. This will need to be on an individual-element basis since the lefts are different:

$(".portfolio").each(function() {
    var $this = $(this);
    var left = $this.css("left");
    $this.css({left: "", right: left});
});

Live Example (I've added units to the left values [px]):

setTimeout(function() {    $(".portfolio").each(function() {        var $this = $(this);        var left = $this.css("left");        $this.css({left: "", right: left});    });    $("#header").text("After:");}, 500);

.portfolio {  position: absolute;}

<div id="header">Before:</div><div class="portfolio" style="left:0px">Content</div><div class="portfolio" style="left:230px">Content</div><div class="portfolio" style="left:446px">Content</div><div class="portfolio" style="left:841px">Content</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

how to replace css Properties with jQuery

You can use .css()

var left = $('#set').css('left');
$('#set').css({
    right : left,
    left: 'auto'
});

Change css property using jquery

you need to use .css method instad of .attr

$("#myButton").click(function() {
  $(".foo").css("background", "red");
});

Change CSS using JQuery (Animation)

Pseudo-elements are part of the Shadow DOM, so they can't be directly modified. However, you can use classes to to modify them, here's a work around.

jQuery

$(function () { // document ready state
    $("[data-placeholder]").addClass('stop-animation');
});

CSS

.stop-animation:after {
    animation: none !important;
}