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

Alternative to CSS width:calc(100% -100px) Using jQuery for Compatibility

Seeking a cross-compatible alternative to CSS's "width: calc(100% -100px)", which provides the desired functionality but may not be universally supported, one can turn to jQuery.

jQuery Solution:

jQuery offers a straightforward method to replicate the CSS expression for browsers that lack its support:

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

This code assigns a 100% width to the targeted element and then subtracts 100px from its width value. This effectively mimics the functionality of "width: calc(100% -100px)", making it responsive and compatible with browsers that do not natively support the calc expression.

jQuery's ability to handle relative calculations effortlessly makes this method a convenient and reliable alternative to manually implementing the calculation yourself.

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