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

Show two <p>'s next to each other

Is there a way to generate bootstrap divs by parsing csv text?

Tips for verifying if an object has been loaded prior to binding it with jQuery

Troubleshooting: Issues with executing a PHP script from jQuery

How to customize field appearance in Django authentication login view by adding a CSS class

Tips for showcasing my database in real-time using Php, JavaScript, jQuery and AJAX

Refreshing Child's Activities

Missing information in input field using JQUERY

What causes the circular progress bar to disappear when hovering over the MUI React table?

A simple guide to viewing a sequential list of loaded stylesheets in Google Chrome

Customizing input tags

When using jQuery to parse JSON, I am unable to make changes to an array

Implementing a Radial Cursor with a Custom Background Image in JavaScript

Having trouble deciphering mathematical formulas while editing content on ckeditor

What causes the ongoing conflict between prototype and jquery?

Inheritance of currentColor in SVG URLs

Unable to execute jQuery - AJAX in PHP

The HTML attribute "hasbox" specifies the presence of a box within the element

Transitioning Between Div Elements Using Jquery

Styling a modal popup using session storage in CSS