JavaScript border-color / color styling - PullRequest
Новая
       25

JavaScript border-color / color styling

2 голосов
/ 12 апреля 2010

Я бы хотел стилизовать 'input.submit' формы (эффект наведения для IE) с использованием JS и попробовал следующее, что, к сожалению, не работает. 

<!--[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]-->

Не могли бы вы исправить это для меня? ТИА, Дан

Ответы [ 2 ]

3 голосов
/ 12 апреля 2010

Должно быть: 

foo.onmouseover = function() {
    this.style.borderColor='#000000'; 
    this.style.color='#000000';
}
1 голос
/ 12 апреля 2010

Ответ значительно усложняется, если элементы генерируются внешним сценарием JavaScript. Сначала вам нужно будет найти элемент, чтобы подходы by id и class не работали, если у них их уже нет - см. Решение type ниже.

Найти по id:

Следующее является предпочтительным, вам нужно добавить идентификатор для ввода ввода, например. <input type="submit" id="submit"> для ссылки на него: 

// 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';}

но должно работать и следующее:

Найти по class:

вам нужно указать класс, например <input type="submit" class="submit"> в этом случае. getElementsByClass не ищет type, он ищет 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>

Найти по type:

Вы можете найти по type, если используете следующее: 

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')
...

Что бы я сделал: 

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

, затем используйте var foo = getElementByType(document.getElementById('externalElms'), 'submit', 'input'), чтобы не проходить все элементы на странице.

...