Добавление стилей к элементу через функцию
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
Comments