Avoid replacing CSS properties, instead use jQuery to supplement them

Question

Avoid replacing CSS properties, instead use jQuery to supplement them

Can anyone help me figure out how to use the jquery .css() function without overwriting existing values, but instead adding additional values to css properties?

For example, I have an element that currently has the css transform:translate(-50%, -50%). I want to use the jQuery .css() function to ADD transform: rotate(90deg), but every time I try it, it just overwrites the original value.

If my explanation is unclear, please take a look at this fiddle for clarification. http://jsfiddle.net/justinbchristensen/mvhwbjLo/1/

In the Fiddle, you'll notice that clicking the button causes the square to lose its initial transformation, slide down, and rotate. However, subsequent clicks only rotate the square because the 'transform:translate' property is not being lost.

I would prefer not to specify the entire transformation in my .css() function like

element.css('transform', 'translate(-50%,-50%) rotate(90deg)'

; I just want to add the rotation to the existing transformation.

Is there a way to achieve this desired outcome?

jquery css css-transforms

Answer 1

Answer №1

Due to the nature of transform being a shorthand property, it requires combining values instead of utilizing an incremental method.

An alternative approach would involve fetching the previous value and appending the new one:

View the Updated JsFiddle here

var rotation = 0;
function rotate() {
    rotation += 90;
    var rotationString = 'rotate(' + rotation + 'deg)';
    var prev = $('#square').css('transform');
    $('#square').css('transform', prev + " " + rotationString);
}

Answer 2

Due to the nature of transform being a shorthand property, it requires combining values instead of utilizing an incremental method.

An alternative approach would involve fetching the previous value and appending the new one:

View the Updated JsFiddle here

var rotation = 0;
function rotate() {
    rotation += 90;
    var rotationString = 'rotate(' + rotation + 'deg)';
    var prev = $('#square').css('transform');
    $('#square').css('transform', prev + " " + rotationString);
}

Answer 3

Answer №2

Make sure to keep track of the current style before combining:

let rotation = 0;
function rotateObject() {
    rotation += 90;
    let rotationString = 'rotate(' + rotation + 'deg)';
    let currentStyle = $('#square').css('transform');
    $('#square').css('transform', currentStyle +' '+ rotationString);
}

http://jsfiddle.net/abcd1234/

This method is effective, but I wonder if there are alternative approaches.

Answer 4

Make sure to keep track of the current style before combining:

let rotation = 0;
function rotateObject() {
    rotation += 90;
    let rotationString = 'rotate(' + rotation + 'deg)';
    let currentStyle = $('#square').css('transform');
    $('#square').css('transform', currentStyle +' '+ rotationString);
}

http://jsfiddle.net/abcd1234/

This method is effective, but I wonder if there are alternative approaches.

Answer 5

Answer №3

The reason for why it replaces the value instead of adding to it is simply because of the way cascading in CSS works. When you set a value on the transform property, it can only have one value at a time. Therefore, from the API's perspective, you are essentially replacing the existing value with a new one. In CSS code, this concept can be demonstrated as follows:

#square {
    transform: translate(-50%, -50%);
    transform: rotate(90deg);
}

As illustrated, the second declaration will override the first one.

CSS does not allow for partial or incremental property declarations. Consequently, there is no direct way to add a value to an existing property without discarding the current value.

Basically, when setting a new value, you must include the existing transform within it. By utilizing jQuery for setting the value, you can fetch the current value using the .css() method, append your new transformation, and then apply the combined result, eliminating the need to hardcode the original value:

var currentTransform = $('#square').css('transform');
var rotationString = 'rotate(' + rotation + 'deg)';
var newTransform = currentTransform + ' ' + rotationString;
$('#square').css('transform', newTransform);

An issue that may arise with this approach is that running this code block again will result in currentTransform containing the previous rotation as well. This means that each subsequent execution will continue adding rotations. If this behavior is undesired, additional checks will need to be implemented or, unfortunately, the value will have to be hardcoded.

Answer 6

The reason for why it replaces the value instead of adding to it is simply because of the way cascading in CSS works. When you set a value on the transform property, it can only have one value at a time. Therefore, from the API's perspective, you are essentially replacing the existing value with a new one. In CSS code, this concept can be demonstrated as follows:

#square {
    transform: translate(-50%, -50%);
    transform: rotate(90deg);
}

As illustrated, the second declaration will override the first one.

CSS does not allow for partial or incremental property declarations. Consequently, there is no direct way to add a value to an existing property without discarding the current value.

Basically, when setting a new value, you must include the existing transform within it. By utilizing jQuery for setting the value, you can fetch the current value using the .css() method, append your new transformation, and then apply the combined result, eliminating the need to hardcode the original value:

var currentTransform = $('#square').css('transform');
var rotationString = 'rotate(' + rotation + 'deg)';
var newTransform = currentTransform + ' ' + rotationString;
$('#square').css('transform', newTransform);

An issue that may arise with this approach is that running this code block again will result in currentTransform containing the previous rotation as well. This means that each subsequent execution will continue adding rotations. If this behavior is undesired, additional checks will need to be implemented or, unfortunately, the value will have to be hardcoded.

Avoid replacing CSS properties, instead use jQuery to supplement them

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to show an image on the screen once a submit button is clicked?

Retrieve the id by using the `$` selector

Error: JSON parsing encountered an issue with token "o" at position 1 while making an ajax request

When a specific JavaScript function is triggered, the value of an HTML control will reset to its original default value

Ways to separate information from a database into multiple option tags for a dropdown selection menu

generate a customized synopsis for users without storing any data in the database

I'm working on a CSS project and my goal is to ensure that all the items are perfectly aligned in a

Designing a charcoal square div featuring a see-through circular element at its center

Notify of a specific value in an array that is retrieved through an AJAX request

Utilizing Font-face and background images in asset-pipeline plugin: A comprehensive guide

I'm looking for help on creating a three-column table using javascript/jquery. The table should display Product, Price, and Discount (which is calculated at 20%). Can anyone

Tips on fixing image movement when scrolling and switching resolutions

What steps can I take to stop the background image from zooming in modal view?

Attempting to showcase a pair of unordered lists side by side using the power of flexbox

Tips for Deleting a Certain Element with Its Children from a String Using JQuery

Enhanced Bootstrap Carousel with White Background Transitions

Is there a way to display a modal before redirecting to the next page after clicking a submit button in a rails application?

jQuery scripts fail to load upon returning using the back button

I am a bit confused about how to use jQuery delegate

Splitting the text vertically by utilizing a single DOM element