java如何使用css样式将颜色应用于线条元素，直到指定的偏移宽度？

Question

要将指定的颜色应用于线条元素，直到指定宽度

无论我在哪里点击这条线，我都会得到它的偏移宽度，所以我必须在偏移宽度上应用不同的颜色，我怎么做，有什么想法吗

int lineWidth = DOM.getElementPropertyInt(lineElement, "offsetWidth");
int lineLeftOffset = (width / 2) - (lineWidth / 2);
DOM.setStyleAttribute(lineElement, "left", lineLeftOffset + "px");

这里使用lineLeftOffset设置当前位置，直到当前位置，我必须为lineElement指定不同的颜色。 我尝试了以下操作，但它将颜色应用于整个元素

 DOM.setStyleAttribute(lineElement, "backgroundColor", "red");

Answer 1

我认为在div中使用span元素作为内联块，然后对其应用颜色是很有用的

<div id="LineElement"><span>&nbsp;</span></div>

CSS:

#lineElement{
    background-color:#000033;
    height:5px;
}
#lineElement > span{
    background-color:red;
    height:inherit;
    display:inline-block;
}

Answer 2

您可以使用两个元素实现这一点-一个是您的LineElement，另一个只是一个div。将此div作为子元素添加到LineElement。将lineLeftOffset和背景设置为子div元素，如-

<div id="LineElement">
  <div></div>
</div>

#LineElement {
   background-color: black;
  padding: 3px;
}

#LineElement div {
   background-color: orange /* set the color from the java code */;
   width: 40%; /* Adjust the width from the java code */
   height: 2px;
}

对于访问子div，可以使用

lineElement.getElement().getFirstChild();