[FAQ] Inline Style-attribute rejected

[bnomei]

Question With default setup my style attributes are rejected. how to fix this?

Answer 1 Create a custom snippet and allow unsafe inline. Not a very good idea.

Answer 2 Use CSS Object Model (CSSOM) to set style. Do this by storing at adata-attribute and apply with jQuery/Zepto. https://stackoverflow.com/questions/24713440/banned-inline-style-csp-and-dynamic-positioning-of-html-elements/29089970#29089970

json string in data attr NOTE: json string needs " so wrap in '.

<div id="special" data-style='{ "backgroundColor": "#8EE", "fontSize": 28 }'>...</div>

jquery/zepto https://api.jquery.com/css/#css-properties https://zeptojs.com/#css

var specialStyle = JSON.parse($('#special').attr('data-style'));
elem.css(specialStyle);

$('[data-style]').each(function (idx, ele) {
  let data = $(ele).attr('data-style')
  if (data !== undefined && data.length > 0) {
    let style = JSON.parse(data)
    $(ele).css(style)
  }
})