Question

我想通过javascript删除所有输入元素的box-shadow。我试过这个，但它不起作用。

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

Answer 1

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");

Answer 2

getElementsByTagName（）方法返回所有元素的集合在具有指定标签名称的文档中，作为NodeList对象。

您可以通过[...NodeList]

快速将NodeList对象转换为数组

将NodeList对象转换为数组 [...document.getElementsByTagName('input')]
然后使用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" />

从Javascript中删除输入的box-shadow

2 个答案: