Добавление стилей к элементу через функцию

PHOTO EMBED

Tue Apr 19 2022 07:36:34 GMT+0000 (Coordinated Universal Time)

Saved by @happy_cutman #javascript

export const frameStyles = {
  'frame-modal': {
    'background-color': '#fff',
    'border-radius': '5px',
    margin: '0 auto',
    padding: '20px',
    width: '70%'
  },
  'frame-button': {
    'background-color': '#ff4343',
    padding: '4px 16px',
    'border-radius': '5px',
    color: '#fff',
    cursor: 'pointer',
    'text-align': 'center',
    border: 'none'
  },
  'frame-button:hover': {
    'background-color': '#de3838'
  },
}



export const setStyles = (stylesObject: object) => {
  const range = document.createRange();
  let res = "";
  let arr: string[] = []
  Object.entries(stylesObject).forEach(([key]) => {
    // @ts-ignore
    const obj = JSON.stringify(stylesObject[key], null, "\t")
      .replace(/"/g, "")
      .replace(/,\n/g, ";")
      .replace(/\}/g, ";}");
    arr.push(`.${key}${obj}`)
  });

  res = `<style>${arr.join(' ')}</style>`;
  const frag = range.createContextualFragment(res);
  // @ts-ignore
  document.querySelector("head").append(frag);
};
content_copyCOPY