CODEWITHSUNDEEP
javascript
Martin
Martin

Reputation: 95

Remove box-shadow of input from Javascript

I want to remove box-shadow of all input elements by javascript. I have tried this but it does not work.

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

Upvotes: 3

Views: 5002

Answers (2)

Hassan Matooq
Hassan Matooq

Reputation: 1

The getElementsByTagName() method returns a collection of all elements in the document with the specified tag name, as a NodeList object.

you can quickly convert NodeList object to array by this way [...NodeList]

  1. convert NodeList object to array [...document.getElementsByTagName('input')]
  2. then use forEach to loop through elements

full code:-

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

Example:-

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" />

Upvotes: 0

nullpotent
nullpotent

Reputation: 9260

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

getElementsByTagName returns NodeList, which is sort of like an Array; has length property, and is enumerable, but has no other goodies.

And here's an alternative which you should prefer:

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

But If I were you, I'd invest my time into learning jQuery, because of this:

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

Upvotes: 6

Related Questions