remove attribute by using getelementbyclass

Question

Here i am trying to call class and get the value in variable to remove its attribute style and setting style again but it shows error like this

Uncaught TypeError: cls.removeAttribute is not a function.

cls = document.getElementsByClassName("ps-scrollbar-x-rail");
cls1 = document.getElementsByClassName("ps-scrollbar-x");
cls2 = document.getElementsByClassName("ps-scrollbar-y-rail");
//alert(cls);
//alert(cls1);
//alert(cls2);
//console.log(cls);
//console.log(cls1);
//console.log(cls2);

cls.removeAttribute("style"); 
cls1.removeAttribute("style");
cls2.removeAttribute("style");

cls.setAttribute("style","width: 600px; left: 258px; bottom: 1px;"); 
cls1.setAttribute("style","left: 143px; width: 333px;");
cls2.setAttribute("style","top: 0px; right: -255px;");

Onclick to call this method. Which shows error.

Suren Srapyan · Answer 1 · 2017-02-04T10:06:32.960

getElementsByClassName will return to you an array like object - NodeList . You need to call removeAttribute on each item of that object. You can iteraet over it using simple for loop or foreach()

for(var i = 0; i < cls.length; i++){
   cls[i].removeAttribute("style"); 
}

Examples

With For

var cls = document.getElementsByClassName('text');

for(var i = 0; i < cls.length; i++) {
   cls[i].removeAttribute('style');
}

<p style="color: red" class="text">Test</p>
<p style="color: red" class="text">Test</p>
<p style="color: red" class="text">Test</p>
<p style="color: red" class="text">Test</p>

With ForEach

var cls = document.getElementsByClassName('text');

Array.prototype.forEach.call(cls, (item) => item.removeAttribute('style'));

<p style="color: red" class="text">Test</p>
<p style="color: red" class="text">Test</p>
<p style="color: red" class="text">Test</p>
<p style="color: red" class="text">Test</p>

Obvious duplicates don't need answers, they need close votes. — T.J. Crowder, Feb 04 '17 at 10:11
yes but my classes are different not the same as you see above — rinki, Feb 04 '17 at 10:43

score 0 · Answer 2 · answered Feb 04 '17 at 10:03

0

JavaScript gets the elements as an array. You need to use

cls[0].removeAttribute("style"); 
cls1[0].removeAttribute("style");
cls2[0].removeAttribute("style");

answered Feb 04 '17 at 10:03

Vinit Sarvade

750
6
14

error shown Uncaught TypeError: Cannot read property 'classList' of null – rinki Feb 04 '17 at 10:06

David Thomas · Answer 3 · 2017-02-04T10:55:14.723

Given that getElementsByClass() returns a live NodeList, you have to iterate over each of the elements in that NodeList in order to remove the attribute from each Node in turn.

But given that you're looking for the elements of three individual classes, it would make more sense to use document.querySelectorAll(), which allows for multiple selectors and then iterate over each element in the returned (non-live) NodeList:

// retrieves a non-live NodeList of all elements with any
// of the specified class-names:
var allClasses = document.querySelectorAll('ps-scrollbar-x-rail, ps-scrollbar-y-rail, ps-scrollbar-x');

// uses Array.from() to convert the Array-like NodeList
// into an Array:
Array.from( allClasses )

  // upon which we can use Array.prototype.forEach():
  .forEach(

    // using an Arrow function to call
    // Element.removeAttribute() on
    // each element in turn; 'el' is
    // the current element in the Array
    // of elements:
    el => el.removeAttribute('style')

  );

References:

remove attribute by using getelementbyclass

3 Answers3