Change Dynamic Inline CSS Attributes With jQuery

Question

I'm attempting to alter the min-width and width values for a div with class of .upb_row_bg . This div has dynamically generated widths. Resizing the browser window will cause these values to change.

Any idea why this jQuery, being loaded via an add_action to wp_footer, isn't working? Don't know if it matter, but this is an element for Visual Composer that I'm attempting to alter.

<div class="upb_row_bg" data-bg-override="9" style="min-width: 1368px; left: -81px; width: 1368px;"></div>

jQuery(document).ready(function($) {
    $('div.upb_row_bg').css({"min-width" : "-=40" , "width" : "-=40"});
}); 

Answer 1

Your original code actually works fine; you can see it here in this fiddle. There is likely something else going on with the website.

The .css() method can use use relative values as you've pointed out so thats not the issue.

I've edited your code in my examples to make it slightly easier to follow.

$('button').click(function(){
	$('.upb_row_bg').css({"min-width" : "-=40" , "width" : "-=40"});
});

.upb_row_bg {
    height: 20px;
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button>shrink</button>
<div class="upb_row_bg" data-bg-override="9" style="min-width: 100px; width: 100px;"></div>