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

Question

想将指定的颜色应用到 Line 元素到指定的宽度？

无论我在哪里单击该行，我都会得到它的 offsetWidth，所以我必须在该 offsetwidht 上应用不同的颜色，我该怎么做，知道吗？

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

您可以使用 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();

Answer 2

我认为将 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;
}