How to Achieve `width: calc(100% - 100px)` Functionality in Older Browsers Using jQuery?

A jQuery Alternative for the CSS Code: width: calc(100% -100px)

The CSS code width: calc(100% -100px) calculates the width of an element by subtracting 100px from the total width of the container. However, this code only works in modern browsers like Chrome and Firefox.

For compatibility with older browsers, you can use jQuery to mimic the functionality:

$('#yourEl').css('width', '100%').css('width', '-=100px');

In this code:

1. $('#yourEl').css('width', '100%'): Sets the width of the element with the ID yourEl to 100%.
2. css('width', '-=100px'): Subtracts 100px from the current width of the element.

This jQuery code accomplishes the same result as the CSS calc expression: it dynamically calculates the width of an element after removing 100px. It is compatible with older browsers that do not support the calc function.

The above is the detailed content of How to Achieve `width: calc(100% - 100px)` Functionality in Older Browsers Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!