Using javascript with css?

Question

when I pressed text input, I want to change the background color of the input, but with javascript.

I know using css.

I want for example.

<form action="" name="abc" method="post"> <input name="abc" id="name" type="text"/> <input name="yusuf" type="text"/> <input type="submit"/> </form> 

How can I select element name as name using javascript?

I want to look like:

  <script> document.getElementById("name").style = "background-color:red"; </script> 

I want to write css code, but directly. Soon, how can I achieve style = "" parameters?

Answer 1

You are looking for a style object:

 document.getElementById("name").style.backgroundColor = "red"; 

You can also set the className property to apply an existing CSS class to an element.

Answer 2

Is there a jQuery option? You can try something like this:

 $(document).ready(function(){ var toggleRed = function(){ $(this).toggleClass('red'); }; $('input[type=text]').focus(toggleRed); $('input[type=text]').blur(toggleRed); }); 

And then define this in your CSS:

 input.red { background-color: Red; color: White; } 

See a working example: http://jsfiddle.net/V5qJp/