How to change background color of TextBox by Javascript?

Question

I am trying to change background color of textbox by using javascript but my code is not working. I search SO but not find any suitable answer. Here is my code.

<head>
    <script type="text/javascript" language="javascript">
        function abc() {
            var v = document.getElementById("<%=TextBox1.ClientID%>");
            v.setAttribute('BackColor', 'Red');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="abc()" onclick="Button1_Click"/>
    </div>
    </form>
</body>

enter image description here

How about v.style.backgroundColor="red"; ?

Pete Wilson
– Pete Wilson

2011-11-30 16:40:26 +00:00
Commented Nov 30, 2011 at 16:40 — Pete Wilson
– Pete Wilson, Commented Nov 30, 2011 at 16:40

Galled · Accepted Answer · 2011-11-30 17:32:33Z

7

You are trying to change the UI that is html, so you need to use javascript/css properties.

Here there is a list of css attributes accessible by javascript.

Try with:

   <script type="text/javascript" language="javascript">
        function abc() {
            var v = document.getElementById("<%=TextBox1.ClientID%>");
            v.style.backgroundColor = "red";
        }
    </script>

Furthermore I have the Visual Studio 2010 and the Intellisense also show me the style attribute:

enter image description here

You are right jams, when I pretend to point to an id from a html generated by asp the intellisense doesn't works for the style attribute:

enter image description here

I think the Intellisense doesn't reach to this id because at the moment of you are writting this code, the html doesn't exists.

edited Nov 30, 2011 at 17:32

answered Nov 30, 2011 at 16:39

Galled

4,2012 gold badges30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Amit Over a year ago

I check it in Visual Studio 2010, but when I type v dot then intellisense windows does not has style option.

Galled Over a year ago

@jams It's so weird my Visual Studio 2010 does show me the style option. I think could be the "<%=TextBox1.ClientID%>", because when I write a document.getElementById("existingId") and the existingId are in the html aspx file does behaves like I said.

Amit Over a year ago

can you post a screen shot for verification. I am posting my.

Amit Over a year ago

I have posted my. please check it.

Amit Over a year ago

you are using <p id="texID" and I am using <asp:TextBox ID="TextBox1" runat="server">. When you will try TextBox you will not get style option. Check it and tell me.

|

vcsjones · Accepted Answer · 2011-11-30 16:39:30Z

2

BackColor does not exist on the client side. That's an ASP.NET server-side notion. Rather, you want to set it with CSS:

v.style.backgroundColor = 'Red';

Here is a reference of the names of CSS properties as they would appear in JavaScript.

answered Nov 30, 2011 at 16:39

vcsjones

142k34 gold badges300 silver badges294 bronze badges

3 Comments

Amit Over a year ago

yes it works. I am using Visual Studio 2008 and its intellisense windows does not show style for v. Can you explain it why?

Galled Over a year ago

@jams I guess that is not registered in 2008, but in Visual Studio 2010 does.

vcsjones Over a year ago

@jams Galled is right, 2008 has very limited support for JavaScript intellisense. If you really want it, add ins like Resharper 6 + add it in, better than VS 2010 does.

Collectives™ on Stack Overflow

How to change background color of TextBox by Javascript?

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related