<div class="container">
<div class="button" role="button">Button Component</div>
</div>
<div class="container">
<div class="control">
<label for="backgroundColor">背景颜色(background-color):</label>
<input type="color" id="backgroundColor" value="#ffffff" />
</div>
<div class="control">
<label for="color">文本颜色(color):</label>
<input type="color" id="color" value="#333333" />
</div>
<div class="control">
<label for="borderColor">边框颜色(border-color):</label>
<input type="color" id="borderColor" value="#cccccc" />
</div>
<div class="control">
<label for="borderRadius">圆角(border-radius):</label>
<input type="number" id="borderRadius" value="3" step="1" />
<span>px</span>
</div>
<div class="control">
<label for="fontSize">字号(font-size):</label>
<input type="number" id="fontSize" value="16" step="1">
</div>
<div class="control">
<label for="padding">内距(padding):</label>
<input type="text" value="5px 10px" id="padding"/>
<span>值与值之间要有空格</span>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
padding: 2vh;
}
.container {
margin: 1vh;
min-width: 40vw;
min-height: 80vh;
border: 1px dashed #333;
border-radius: 3vh;
padding: 3vh;
&:nth-child(1) {
display: flex;
justify-content: center;
align-items: center;
}
}
.button {
// 声明CSS自定义属性
--backgroundColor: #fff;
--borderColor: #ccc;
--borderRadius: 5px;
--fontSize: 16px;
--color: #333;
--padding: 5px 10px;
// 按钮的基本样式
display: inline-flex;
justify-content: center;
align-items: center;
// 调用CSS自定义属性
background: var(--backgroundColor);
border: 1px solid var(--borderColor);
color: var(--color);
font-size: var(--fontSize);
padding: var(--padding);
border-radius: var(--borderRadius);
}
.control {
display: grid;
grid-template-columns: 3fr 1fr 1fr;
gap: 10px;
place-content: center;
align-items: center;
& + .control {
margin-top: 10px;
}
label {
text-align: right;
font-size: .8rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
white-space: nowrap;
}
span {
color: #495057;
font-size: .8rem;
}
input {
display: block;
width: 6em;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
}
View Compiled
const buttonElement = document.querySelector('.button');
const backgroundColorInput = document.querySelector('#backgroundColor');
const colorInput = document.querySelector('#color');
const borderColorInput = document.querySelector('#borderColor');
const borderRadiusInput = document.querySelector('#borderRadius');
const fontSizeInput = document.querySelector('#fontSize');
const paddingInput = document.querySelector('#padding');
console.log(buttonElement, backgroundColorInput.value, colorInput.value, borderColorInput.value, borderRadiusInput.value, fontSizeInput.value, paddingInput.value)
backgroundColorInput.addEventListener('change', function(e){
buttonElement.style.setProperty('--backgroundColor', this.value)
});
colorInput.addEventListener('change', function(e){
buttonElement.style.setProperty('--color', this.value)
});
borderColorInput.addEventListener('change', function(e){
buttonElement.style.setProperty('--borderColor', this.value)
});
borderRadiusInput.addEventListener('change', function(e){
buttonElement.style.setProperty('--borderRadius', `${this.value}px`)
});
fontSizeInput.addEventListener('change', function(e){
buttonElement.style.setProperty('--fontSize', `${this.value}px`)
});
paddingInput.addEventListener('change', function(e){
buttonElement.style.setProperty('--padding', this.value)
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.