Question

I would like to access the asp.net gridview’s cssClass attribute and change it with Javascript.

I know I can access other individual style attributes like so:

document.getElementById('<%=GridView1.ClientID%>').style

But I’d like to change the cssClass in particular. This is what I have after attempting the first suggestion. It does not work as of yet. I placed that line you gave me in the first part of a function that highlights a selected row so that all previously highlighted rows would revert back to the normal style. Thoughts?

function ChangeRowColor(rowID) {
    document.getElementById('<%=gvxTaskList.ClientID%>').className += "tablestyle";

    var color = document.getElementById(rowID).style.backgroundColor;
    if (color != 'yellow')
        oldColor = color;
    if (color == 'yellow')
        document.getElementById(rowID).style.backgroundColor = oldColor;
    else document.getElementById(rowID).style.backgroundColor = 'yellow';
}                  

Answer 1

Try this

document.getElementById('<%=GridView1.ClientID%>').className = "class";

And to add to existing class

document.getElementById('<%=GridView1.ClientID%>').className += " class";

Update

function addClass()
{
    var exClass = document.getElementById('<%=GridView1.ClientID%>').className;

    if(exClass.indexOf('className') == -1)  //check that the class does not already exist
    {
        if(exClass.length == 0)
           document.getElementById('<%=GridView1.ClientID%>').className += 'className'; //add
        else
           document.getElementById('<%=GridView1.ClientID%>').className += ' className'; //append
    }
}