x3dom改变了一类元素的颜色

时间:2014-11-10 16:24:47

标签: javascript css x3dom

我想改变一类元素的颜色。

示例:

<transform translation='-2 0 0'> 
      <shape  id="N0_0_0"> 
       <appearance> 
         <material class="L2_0_0_3 L2_0_0_2" diffuseColor='1 0 0'></material> 
       </appearance> 
       <box size='0.5,0.5,0.5'></box> 
    </shape> 
    </transform> 
    <transform translation='2 0 0' > 
      <shape id="N2_0_0"> 
       <appearance> 
         <material class="L2_0_0_3 L2_0_0_1" diffuseColor='1 0 0'></material> 
       </appearance> 
       <box size='0.5,0.5,0.5'></box> 
    </shape> 
    </transform> 

当发生特定事件时(在我的情况下是元素的onMouseOver事件),我想更改类“matT1”的所有元素的颜色。 我到目前为止尝试改变第一个元素的颜色,但它不起作用。

document.getElementsByClassName("matT1")[0].prop('diffuseColor', '0 0 1');

2 个答案:

答案 0 :(得分:1)

您还可以多次重复使用整个材料。更改diffuseColor将影响所有重用。

<material DEF='somename' diffuseColor='1 0 0'></material>

<material USE='somename'></material>
<material USE='somename'></material> 

答案 1 :(得分:0)

我用jquery解决了它。

<script src="http://code.jquery.com/jquery-latest.js"></script>

我刚为每个想要改变颜色的元素添加了一个类。

 <transform 
    onmouseover="$('material.L2_0_0_3').attr('diffuseColor', '1 0.25 0.25');"
    onmouseout ="$('material.L2_0_0_3').attr('diffuseColor', '0.5 0.5 0.5');">

onmouseout再次将颜色翻转回正常状态。 $('material.L2_0_0_3')选择所有材质元素(为性能而这样做)并且是“L2_0_0_3”类的成员。