Почему ширина цвета никогда не применяется в 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? Я должен вручную установить его, используя свойство css в js.

Answer 1

Вы устанавливаете id как panelColor в js, а в css вы используете #panelTitleColor

Так что установите в css #panelColor

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

Answer 2

Вместо использования этого

input.id = "panelColor";

Вы можете использовать это и проверить свой CSS

 input.setAttribute("id", "panelColor");

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

Answer 3

Ваша ширина определяется свойствами left и right. В вашем случае это 10px слева от div и 35px справа от вашего div.

То есть ваша ширина равна ширине вашего деления минус 10 минус 35.

В вашем случае вы должны использовать свойство width в процентах, а не в фиксированных пикселях.