I'd like to style 'input.submit' of a form (hover effect for IE) using JS and tried the following which doesn't work unfortunately.

<!--[if IE]>
<script type="text/javascript">

// CHANGE SUBMIT STYLE
var foo = document.getElementByClass('input.submit');
foo.onmouseover = this.style.border-color='#000000'; this.style.color='#000000';
foo.onmouseout = this.style.border-color='#888888'; this.style.color='#888888';
foo.onclick = this.style.border-color='#000000'; this.style.color='#000000';

</script>
<![endif]-->

How can I fix this so that it works?

I'd like to style 'input.submit' of a form (hover effect for IE) using JS and tried the following which doesn't work unfortunately.

<!--[if IE]>
<script type="text/javascript">

// CHANGE SUBMIT STYLE
var foo = document.getElementByClass('input.submit');
foo.onmouseover = this.style.border-color='#000000'; this.style.color='#000000';
foo.onmouseout = this.style.border-color='#888888'; this.style.color='#888888';
foo.onclick = this.style.border-color='#000000'; this.style.color='#000000';

</script>
<![endif]-->

How can I fix this so that it works?

• javascript
• css
• colors
• border

Share Improve this question Follow edited Jan 31, 2023 at 21:16 TylerH 21.1k7878 gold badges7979 silver badges114114 bronze badges asked Apr 12, 2010 at 2:10 DanDan 4311 gold badge11 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

It should be:

foo.onmouseover = function() {
    this.style.borderColor='#000000'; 
    this.style.color='#000000';
}

The answer is considerably more plicated if the elements are generated by an external javascript script. You'll need to find the element first, so the by id and class approaches won't work unless they already have one - see the type solution below.

Find by id:

The following is preferred, you need to add an id to the input submit e.g. <input type="submit" id="submit"> to reference it by:

// CHANGE SUBMIT STYLE
var foo = document.getElementById('submit');
foo.onmouseover = function() {this.style.borderColor='#000000'; this.style.color='#000000';}
foo.onmouseout = function() {this.style.borderColor='#888888'; this.style.color='#888888';}
foo.onclick = function() {this.style.borderColor='#000000'; this.style.color='#000000';}

but the following should also work:

Find by class:

you'll need to specify a class e.g. <input type="submit" class="submit"> in this case. getElementsByClass doesn't look for the type, it looks for the class.

<script type="text/javascript">

function getElementsByClass(node,searchClass,tag) {
  var classElements = new Array();
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("\b"+searchClass+"\b");
  for (i = 0, j = 0; i < elsLen; i++) {
    if ( pattern.test(els[i].className) ) {
      classElements[j] = els[i];
      j++;
    }
  }
return classElements;
}

// CHANGE SUBMIT STYLE
var foo = getElementsByClass(document.body, 'submit', 'input')[0];
foo.onmouseover = function() {this.style.borderColor='#000000'; this.style.color='#000000';}
foo.onmouseout = function() {this.style.borderColor='#888888'; this.style.color='#888888';}
foo.onclick = function() {this.style.borderColor='#000000'; this.style.color='#000000';}

</script>

Find by type:

You could find by type if you use the following:

function getElementByType(node,type,tag) {
  var els = node.getElementsByTagName(tag);
  for (var x=0, x<els.length; x++) {
    if (els[x].type && els[x].type.toLowerCase() == type) {
      return els[x]
    }
  }
}
var foo = getElementByType(document.body, 'submit', 'input')
...

What I would do is:

<div id="externalElms">
    (<script> here)
</div>

then use var foo = getElementByType(document.getElementById('externalElms'), 'submit', 'input') so it doesn't have to go through every element on the page.