js样式对象style object转换成css属性代码-html代码-BFW代码库

js样式对象style object转换成css属性代码

代码语言：html

代码描述：js样式对象style object转换成css属性代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">


<meta charset="UTF-8">




<style>
    body {
        background: #fff;
        height: 100vh;
        margin: 0;
        padding: 0;

        display: grid;
        grid-template-rows: auto 1fr auto;
    }

    header, footer {
        text-align: center;
    }

    a {
        color: LinkText;
    }

    main {
        display: flex;
        padding: 1em;
    }

    form {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: row;
    }

    textarea,
    output {
        flex: 1;

        white-space: pre-wrap;
        border: 1px solid #666;
        padding: 0.5em;
        resize: none;
        font-family: monospace;
    }

    button {
        border: none;
        border-top: 1px solid #666;
        border-bottom: 1px solid #666;
        border-radius: 0;
    }
</style>



</head>

<body>
<header>
<h1>JavaScript 样式对象转换成自定义属性</h1>
<p>
<em>左边输入js样式对象，点击中间按钮就可以看到右边的css属性代码 </em>
</p>
</header>
<main>
<form>
<textarea id="input">{
name: 'light',
borderRadius: '15px',
safeTop: 'calc(env(safe-area-inset-top, 15px) + 35px)',
cardSpacing: {
horizontal: '20px',
vertical: '85px',
},
colors: {
primaryBackground: '#FAFAF2',
primaryButton: '#FFFFFF',
primaryCard: '#FFFFFF',

accent: '#2ea7a4',
text: '#2f2f2f',
textSecondary: '#707070',
tabNav: '#707070',
shadow: '#00000029',
placeholder: '##959595',
highlight: {
text: '#2F2F2F',
green: '#C4FF86',
yellow: '#F1E732'
},

themeBlue: '#47D3F9',
themeOrange: '#FB551E',

feedModalBackground: 'rgba(0,0,0,0.77)',

title: '#000',
subTitle: 'rgba(255, 255, 244, 0.5)',

gradientLeft: 'rgba(249,155,163,1)',
gradientRight: 'rgba(104,60,188,1)'
},
arrayExample: [ "1", "2", "3"]
}</textarea>

<button type=".........完整代码请登录后点击上方下载按钮下载查看