从Javascript中删除输入的框影

Remove box-shadow of input from Javascript

本文关键字：输入 删除 Javascript      更新时间：2023-09-26

我想通过javascript删除所有输入元素的框阴影。我已经试过了，但是行不通。

document.getElementsByTagName('input').style.boxShadow = '';

Array.prototype.forEach.call(document.getElementsByTagName('INPUT'), function(el) {
     el.style.boxShadow = '';
});

getElementsByTagName返回NodeList，这有点像Array;具有length属性，并且是可枚举的，但没有其他属性。

这里有一个你应该更喜欢的选择:

var elements = document.getElementsByTagName('INPUT');
var len = elements.length;
for(var i = 0; i < len; ++i) {
 elements[i].style.boxShadow = '';
}

但是如果我是你，我会花时间学习jQuery，因为:

$("input").css("boxShadow", "none");

getElementsByTagName()方法返回所有元素的集合

在文档中使用指定的标记名，作为NodeList对象。

你可以通过这种方式将NodeList对象快速转换为数组[...NodeList]

  1. 转换NodeList对象为数组[...document.getElementsByTagName('input')]
  2. 然后使用forEach循环遍历元素

完整代码:

[...document.getElementsByTagName('input')].forEach( function(el){
    el.style.boxShadow = 'none';
});

: - 

var NodeList = document.getElementsByTagName('input');
[...NodeList].forEach( function( el, i ) {
  if ( i === 1 ) return; // keep a box shadow for second input
  if ( el.classList.contains('shadow') ) return; // keep a box shadow for shadow class
  el.style.boxShadow = 'none';
});
input {
  display: inline-block;
  padding: 5px;
  margin-top: 10px;
  box-shadow: 0 0 5px #000;
}
<input name="input-1" type="text" value="Input 1" /><br/>
<input name="input-2" type="text" value="Input 2" /><br/>
<input name="input-3" type="text" value="Input 3" /><br/>
<input name="input-4" type="text" value="Input 4" /><br/>
<input class="shadow" name="input-5" type="text" value="Input 5" /><br/>
<input name="input-6" type="text" value="Input 6" />

相关文章：