Переопределить стиль, к которому у меня нет доступа

Question

Я пытаюсь переопределить стиль, который объявлен в таблице стилей, к которой у меня нет доступа.Я пытаюсь удалить высоту: auto в iframe, так как он ломается и не работает на android и мобильных устройствах.

iframe работает с системой бронирования и имеет этапы переменной высоты, поэтому настройка значения высоты не будет работать,Мне просто нужно переопределить часть автоматической высоты.

.main iframe{width: 100%; height: auto !important;}

Если бы я мог каким-то образом удалить функцию автоматической регулировки высоты, это бы решило мою проблему, я просто не знаю, как мне этого добиться, я попытался использоватьСтрока JQuery ниже, но это тоже не сработало.

$( "iframe" ).removeClass( "main iframe" );

Любая помощь и совет будет принята с благодарностью

Спасибо

Answer 1

Вам не нужно использовать JavaScript / jQuery для сброса свойства высоты.

Вам просто нужно добавить другой стиль в свой CSS, который нацелен на iframe с более высокой специфичностью, такой как:

// original style property
.main iframe{width: 100%; height: auto !important;}

// replace "body" with any parent element wrapping your ".main" element
// Change 20% to whatever new value you want to set for the element's height
body .main iframe{height: 20% !important;}

---

Проверьте и запустите фрагмент кода ниже для практического примера вышеупомянутого подхода:

/* CSS */
button {
   background-color: green !important; // old color
}
div button {
   background-color: red !important; // new color
}

<!-- HTML -->
<div>
  <button>
    ABCD
  </button>
</div>

Answer 2

Попробуйте использовать приведенный ниже код, надеюсь, он будет работать ...

$( "iframe" ).prop('style','width: 100%;');