如何使用css样式将线条元素的颜色应用到指定的offsetwidth?

时间:2013-03-20 07:10:46

标签: java css gwt width element

想要将指定的颜色应用到指定widht的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");

2 个答案:

答案 0 :(得分:1)

你可以通过2个元素实现这一点 - 一个你的LineElement和另一个只是一个div。将此div作为子元素添加到LineElement。将lineLeftOffset和background设置为子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();

答案 1 :(得分:0)

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