Изменение динамических встроенных атрибутов CSS с помощью jQuery

Я пытаюсь изменить значения min-width и width для div с классом .upb_row_bg . Этот div имеет динамически генерируемую ширину. Изменение размера окна браузера приведет к изменению этих значений.

Любая идея, почему этот 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"});
});

jquery css dynamic-css
person dbp    schedule 07.11.2015    source источник
comment
Не работает или другой динамический код CSS перезаписывает его? Поставьте консольный лог и проверьте, что происходит.   -  person Bas van Stein    schedule 07.11.2015
comment
Вы устанавливаете значения на -=40. Что это должно значить?   -  person Chet    schedule 07.11.2015
comment
Tushar — потому что встроенный CSS динамически генерируется через jQuery в зависимости от размера окна. _____ BasvanStein - Нет ошибок в журнале консоли. Код CSS по умолчанию все еще на месте, поэтому я предполагаю, что он переопределяет любые модификации, которые я пытаюсь сделать. _____ Чет - пытаюсь уменьшить значения min-width и width на 40 пикселей от их текущего значения.   -  person dbp    schedule 07.11.2015
comment
Div, который я пытаюсь изменить, имеет полную ширину. Я пытаюсь добавить к этому элементу правую и левую границы. Вот почему я пытаюсь изменить ширину, чтобы приспособить границы.   -  person dbp    schedule 07.11.2015
comment
@ optimus203 - Вы пытались получить текущее значение, а затем вычесть из него? Примерно так: minWidth: $('div.upb_row_bg').css('min-width').replace('px', '') -40 + 'px',.   -  person DavidDomain    schedule 07.11.2015
comment
@DavidDomain - попробовал ваш фрагмент, но безуспешно.   -  person dbp    schedule 07.11.2015
comment
@optimus203 - Кажется, работает нормально fiddle   -  person DavidDomain    schedule 07.11.2015
comment
@DavidDomain - да, это тоже работает. Но похоже, что стили по умолчанию переопределяют то, что я пытаюсь вставить.   -  person dbp    schedule 07.11.2015

Ответы (1)


arrow_upward
0
arrow_downward

Ваш исходный код действительно работает нормально; вы можете увидеть это здесь, в этой скрипте. Вероятно, что-то еще происходит с сайтом.

Метод .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>

person justinw    schedule 07.11.2015
comment
Спасибо Куоид. Хорошая идея, но не повезло. - person dbp; 07.11.2015
comment
@ optimus203 optimus203 вы смотрели на скрипку, она работает; встроенный код не загрузил jQuery, поэтому он там не работает, будет редактировать - person justinw; 07.11.2015
comment
@optimus203 отредактировал скрипку и код внутри ответа (чтобы включить jQuery) - нажмите кнопку, чтобы увидеть, как element уменьшается в размере - person justinw; 07.11.2015
comment
Ага - это работает. Но на рассматриваемом сайте похоже, что значения по умолчанию переопределяют эту версию jQuery. В любом случае, дать этому приоритет над любым другим кодом, который может изменять этот встроенный стиль? - person dbp; 07.11.2015
comment
фактически используя относительные значения, например, ваш исходный код работает нормально... - person justinw; 07.11.2015
comment
@ optimus203 это, вероятно, Visual Composer (но я предполагаю), ему нужно будет увидеть живой сайт, чтобы сказать - person justinw; 07.11.2015
comment
Ссылка на среду разработки — new.socceropolis.com. Вы увидите синюю область полной ширины, которую я пытаюсь решить. При загрузке страницы вы должны увидеть мигающий экран с элементом, который мы пытаемся изменить. Но затем для этого раздела начинают действовать значения по умолчанию. - person dbp; 07.11.2015
comment
@optimus203 - думаю, что происходит, так это то, что у вас есть function(), который работает на $( window ).resize(), поэтому при изменении размера он настраивает свойства, в то же время вы пытаетесь ре -настройте эти свойства с помощью нового function. Вероятно, это связано с порядком запуска вашей функции; см. эту скрипту. - person justinw; 08.11.2015
comment
действительно похоже, что первым загружаемым script является ваш custom.js, а затем другие script - я бы попробовал изменить ваши функции wp enqueue script - person justinw; 08.11.2015
comment
Спасибо за помощь Quoid. Ценить это. - person dbp; 08.11.2015