Как манипулировать сгенерированным CSS

Question

У меня есть этот стиль CSS, сгенерированный из модуля Angular, поэтому я ничего не могу там сделать.

Проблема в том, что я хочу получить -30px из того, что генерируется.

<div ng2-sticky="" style="box-sizing: border-box; position: static; float: none; top: auto; bottom: auto; width: 1040px; left: auto;">
     Hello World
</div>

Поскольку значение изменяется в зависимости от размера экрана, я хочу, чтобы ширина всегда была на 30 пикселей меньше.Так что для этого конкретного размера экрана это должно быть 1010px.

Я не уверен, как я мог бы использовать calc здесь или есть какой-то другой метод для достижения этой цели?

PS: я не могу редактировать Javascript, генерирующий этот код, так как его нет на моем сервере.

Answer 1

JS - Вы можете сделать что-то подобное в js

let element = document.querySelector('div[ng2-sticky]'); 
let width = element.offsetWidth;

let newWidth = width - 30 + "px";
element.style.width = newWidth;

CSS - или простой трюк в css будет

div[ng2-sticky]{

  margin: 0 15px;

}

так что это даст поле слева и справа

Answer 2

вы могли бы

document.querySelector('[ng2-sticky=""]').style.width = 1010px;

или, возможно,

<style>div[ng2-sticky=""] {width:1010px !important;}</style>