Necesito verificar si <img> ha definido la propiedad en línea css, y si es así, necesita actualizar su padre con esos css y necesito eliminar la declaración original de CSS.

Así es como lo probé:

var $el = $('.article > img');
$el.each(function () {
  if ($(this).css("float") == "left") { $(this).parent().css("float","left"); }
  if ($(this).css("float") == "right") { $(this).parent().css("float","right"); }
})

Mi etiqueta img tendría css para float o margin y en algún momento ambos o ninguno de ellos. Mi código anterior solo funciona para una regla.

¿Alguien puede decirme cómo hacerlo para ambas CSS reglas?

-1
user3733831 25 jun. 2020 a las 15:44

2 respuestas

La mejor respuesta

Simplemente puede verificar si las imágenes tienen alguna propiedad float o margin y luego establecer el padre con esos valores como:

var $el = $('.article > img');
$el.each(function() {
  const float = $(this).css('float')
  const marginT = $(this).css('margin-top')
  const marginL = $(this).css('margin-left')
  const marginR = $(this).css('margin-right')
  const marginB = $(this).css('margin-bottom')

  // Set the css to the parent based on child img
  if (float !== 'none') $(this).parent().css("float", float);
  if (marginT !== '0px' && marginT !== '')
    $(this).parent().css("margin-top", marginT);
  if (marginL !== '0px' && marginT !== '')
    $(this).parent().css("margin-left", marginL);
  if (marginR !== '0px' && marginT !== '')
    $(this).parent().css("margin-right", marginR);
  if (marginB !== '0px' && marginT !== '')
    $(this).parent().css("margin-bottom", marginB);

  // Remove the original image css
  $(this).removeAttr('style');
})
.article { border: 1px solid red}
img {width: 50px;height: 50px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article">
  <img alt="Image 1" style="float:left" />
</div>
<div class="article">
  <img alt="Image 2" style="margin: 5px 70px" />
</div>
<div class="article">
  <img alt="Image 3" style="float:right;margin: 10px" />
</div>

Tenga en cuenta:

  • Si no hay float aplicado en el elemento, entonces $(this).css('float') devuelve none.
  • Si no hay margin-top aplicado en el elemento, entonces $(this).css('margin-top') devuelve 0px y así sucesivamente.

Entonces, simplemente estamos usando esta lógica para actualizar el CSS principal.

1
palaѕн 25 jun. 2020 a las 14:03

Puede usar el complemento jquery.copycss.js.

$('#some-element').copyCSS('#another-element');  // copy all styles
$('#some-element').copyCSS('#another-element', ['top', 'left']);  // copy just top and left
$('#some-element').copyCSS('#another-element', null, ['top', 'left']);  // copy everything except top and left
0
Dylan 25 jun. 2020 a las 12:57