<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;
  }
}
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)
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.