为什么颜色选择器宽度从未在 CSS 中应用

Question

var colorScript = document.createElement('script')
colorScript.src = "example.com/script.js"
var input = document.createElement('input')
input.className = "jscolor {onFineChange:'panel.style.background = this.toHEXString();'}"
input.id = "panelColor";
input.value = '000000';
document.head.appendChild(colorScript)
document.head.appendChild(input)

#panelColor {
  position: absolute;
  left: 10px;
  top: 35px;
  width: 60px;
}

为什么在 CSS 中从未应用颜色选择器宽度？我必须使用 js 中的 css 属性手动设置它。

Answer 1

宽度由left和right属性决定。在您的情况下，它距离div 左侧 10px，距离div 右侧 35px。

所以你的宽度是你的div 的全宽减去 10 减去 35。

在您的情况下，应将 width 属性用作百分比，而不是固定像素。

Answer 2

你在 js 中将 id 设置为 panelColor，在你使用的 css 中#panelTitleColor

所以设置在 css #panelColor

#panelColor{
    position: absolute;
    left: 10px;
    top: 35px;
    width: 60px;
}

Answer 3

而不是使用这个

input.id = "panelColor";

你可以使用它并检查你的css

 input.setAttribute("id", "panelColor");
#panelColor{
    position: absolute;
    left: 10px;
    top: 35px;
    width: 60px;
}