为什么colorpicker width从不在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;
}

为什么colorpicker宽度从未在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;
}