How to change css property name using jQuery?

Question

I have the following div with "left: Random Number" inline style so I tried to use most of css change functions but no luck .. the problem that I property of left is random and I want to change left to right.

<div class="portfolio" style="left:0">Content</div>
<div class="portfolio" style="left:230">Content</div>
<div class="portfolio" style="left:446">Content</div>
<div class="portfolio" style="left:841">Content</div>

I want jQuery to change all left to right not the property

I tried this but didn't work

$(".portfolio").css({"left": "", "right": ""});

also tried this

$(".portfolio").css({"left", "right"});

so any solution?

score 2 · Accepted Answer · answered Aug 08 '18 at 16:47

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 change css property name using jQuery?

1 Answers1