如何找到具有属性的元素并更改javascript中的属性值？

Question

 function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); } 

 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="x" src="X.png" draggable="true" ondragstart="drag(event)" /> 

After dropping the image how can i change the attribute value draggable="true" to draggable="false" by finding the available elements with attribute draggable="true" inside the function drop() ?

Answer 1

I would use querySelectorAll and setAttribute

document.querySelectorAll('[draggable="true"]').forEach(elem =>
  elem.setAttribute("draggable",false)
);

Older JS

var elems = document.querySelectorAll('[draggable="true"]');
for (var i=0;i<elems.length;i++) {
  elems[i].setAttribute("draggable",false);
}

Using a class:

document.querySelectorAll('.someClass[draggable="true"]')

Answer 2

Use querySelectorAll to get all the elements having draggable set to true . using setAttribute set draggable to false

 function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); var elem = document.querySelector('.className'); elem.querySelectorAll('[draggable="true"]').forEach(e => e.setAttribute('draggable', false)) } 

 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="x" src="X.png" draggable="true" ondragstart="drag(event)" /> 

Answer 3

You can use

document.querySelectorAll('[draggable="true"]');

in order to find elements with a certain attribute.

Note that this works only for HTML attributes, for classes you shall use

document.querySelectorAll('.classname[draggable="true"]')