document.getElementByClassName("classname")是原生JS吗？

需求：比较税前薪资是否在薪资范围内，超过范围则薪资输出变红色。

 

vo里面加了变量redFlag用于判断一条记录是否超过范围，是否变红。但是在jsp页面中由于封装的标签，修改css没有用。

 

想到用js动态改变颜色。但是tb:gridColumn标签只能加styleClass属性

<!-- added by wang.yanlong 2015-04-17 超过税前薪酬上限变红1红0黑-->

<logic:equal value="1" name="stdHeadcountDetailVO" property="redFlag">

<tb:gridColumn property="salaryBefore" label="税前薪酬" styleClass="dragon" />

</logic:equal>

<logic:equal value="0" name="stdHeadcountDetailVO" property="redFlag">

<tb:gridColumn property="salaryBefore" label="税前薪酬" />

</logic:equal>

<!-- end -->

渲染的html是：<td class="dragon "><span class="view" style="display:block;">2800</span></td>

 

如何通过class属性得到对象再改变里面span标签的style属性呢。

1.通过class属性得到对象。

2.找到span对象，改变style属性。

//js变红added by wang.yanlong 2015-04-17，

//这个方法 第一个参数 需要传入 获取class类的父节点  

//第二个参数就是你传入的class名字

//返回的是所有class属性同名的对象数组。

function getByClass(oParent, sClass)

{

        var aEle=oParent.getElementsByTagName('*');

        var aResult=[];

        var re=new RegExp('\\b'+sClass+'\\b', 'i');

        var i=0;

        

        for(i=0;i<aEle.length;i++)

        {

                if(re.test(aEle[i].className))

                {

                        aResult.push(aEle[i]);

                }

        }

        

        return aResult;

}

var wz=getByClass(document,'dragon');

//遍历所有class="dragon"的td对象。找到第一个子节点span,改变style的颜色为red.

for(var i = 0 ; i < wz.length; i++){

alert(wz[i].firstChild.style.color);

wz[i].firstChild.style.color='red';

}

//end