使用 jQuery 更改动态内联 CSS 属性

Question

我正在尝试将 div 的 min-width 和 width 值更改为 .upb_row_bg 的 class。此 div 具有动态生成的宽度。调整浏览器大小 window 将导致这些值发生变化。

知道为什么通过 add_action 加载到 wp_footer 的 jQuery 不起作用吗？不知道这是否重要，但这是我试图更改的 Visual Composer 元素。

<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

您的原始代码实际上可以正常工作；您可以在 fiddle 中看到它。网站可能有其他问题。

.css() 方法可以使用相对值，正如您所指出的那样，这不是问题所在。

我在示例中编辑了您的代码，使其更容易理解。

$('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>

使用 jQuery 更改动态内联 CSS 属性

Change Dynamic Inline CSS Attributes With jQuery

css

jquery

dynamic-css