Обработка JS-вычисленных значений CSS без использования встроенных или встроенных стилей

Question

Если бы я мог использовать встроенные / встроенные стили, я бы сделал что-то вроде этого:

variable.css('width', dynamicallyCalculated + '%');

Но я не могу использовать встроенные / встроенные стили в своем приложении.

Есть ли какой-нибудь простой способ достичь чего-то подобного, возможно?

Я не против использовать jQuery и / или современные методы, если они поддерживаются современными браузерами.

Answer 1

Вы можете добавить таблицы стилей в свой документ, используя jQuery, добавив элемент link к элементу head и затем добавив соответствующие атрибуты после добавления элемента в head (это обеспечивает совместимость с некоторыми более старыми IEверсии):

function addStylsheet(href) {
  $css = $("<link>");
  $("head").append($css);
  
  $css.attr({
    "rel": "stylesheet",
    "href": href,
    "type": "text/css"
  });
}

Вы бы использовали эту функцию следующим образом:

addStylesheet("/some/url/to/a/style.css");

Разумеется, ссылки должны быть частью вашего CSP, так что это выглядит как-тонапример:

Content-Security-Policy: style-src 'self' 

Теперь вы можете загружать только те сценарии, которые исходят из одной схемы и домена и загружаются через один и тот же порт.