2015-11-07 322 views
0

我试图修改和width值为.upb_row_bg类的div。这个div有动态生成的宽度。调整浏览器窗口的大小将导致这些值发生变化。使用jQuery更改动态内联CSS属性

任何想法为什么这个jQuery,通过add_action加载到wp_footer,无法正常工作?不知道它是否重要,但这是我试图改变的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"}); 
}); 
+0

为什么不使用CSS – Tushar

+0

无法工作或其他动态CSS代码覆盖它?把一个控制台日志,并检查发生了什么。 –

+0

您正在将值设置为“ - = 40”。这是什么意思? – Chet

回答

0

你原来的代码实际上工作正常;你可以在这里看到它fiddle。网站上可能还有其他内容。

.css()方法可以使用使用相对值,因为你已经指出,所以这不是问题。

我已经在我的示例中编辑了您的代码,使它更容易遵循。

$('button').click(function(){ 
 
\t $('.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>

+0

谢谢Quoid。好主意,但没有运气。 – optimus203

+0

@ optimus203你看着小提琴,它正在工作;内联代码没有得到jQuery加载,所以它不在那里工作,将编辑 – justinw

+0

@ optimus203编辑小提琴和答案中的代码(包括jQuery) - 单击按钮查看'element'尺寸缩小 – justinw