javascript var css,使用JS操作CSS变量var()

CSS

语言：

CSSSCSS

确定

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');

/*

****************************

====== Set variables =======

****************************

*/

:root {

--white: white;

--bg: #ff8000;

--boxWidth: 100%;

--ht: 100px;

--font: 'Raleway', sans-serif;

}

body {

background: #005C97;

/* fallback for old browsers */

background: -webkit-linear-gradient(to left, #005C97, #363795);

/* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to left, #005C97, #363795);

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

font-family: var(--font);

text-align: center;

color: var(--white);

}

.wrapper {

padding: 10vh 20%;

max-width: 700px;

display: inline-block;

}

h1 {

text-align: center;

font-weight: 300;

font-size: 36px;

}

h1 small {

display: block;

font-size: 14px;

font-weight: 500;

margin-top: 5px;

}

#block {

height: var(--ht);

text-align: center;

line-height: var(--ht);

color: var(--white);

display: inline-block;

width: var(--boxWidth);

border: 5px solid rgba(255, 255, 255, 0.4);

background: var(--bg);

margin-bottom: calc(var(--ht)/4);

}

.color-picker {

border: none;

width: 30px;

height: 30px;

vertical-align: middle;

}

.btn-option {

background-color: rgba(255, 255, 255, 0.1);

margin-top: calc(var(--ht)/4);

padding: calc(var(--ht)/4);

}

button {

border: none;

padding: calc(var(--ht)/6);

font-weight: 600;

text-transform: uppercase;

cursor: pointer;

}