动态设置<img/>“title”属性与“alt”相同

时间：2017-07-10 08:04:44

标签： javascript

这是我的以下代码：

<div class="w3-container" id="menuAuthor" style="float:left">
   <a href="/Author/Benjamin-Franklin-Quotes/213"  class="textnone  fl"  ><img class="w3-circle"  style="width:40px" src="/images/authors.small/Benjamin-Franklin.jpg" alt="Benjamin Franklin Quotes"/> </a>
   <a href="/Author/Winston-Churchill-Quotes/356"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Winston-Churchill.jpg" alt="Benjamin Franklin "/> </a>
   <a href="/Author/Thomas-Jefferson-Quotes/253" class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Benjamin-Franklin.jpg" alt="Thomas Jefferson"/> </a>
   <a href="/Author/George-Washington-Quotes/54" " class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/George-Washington.jpg" alt="George Washington"/> </a>
   <a href="/Author/Martin-Luther-King-Jr-Quotes/53"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Martin-Luther-King-Jr.jpg" alt="Martin Luther King, Jr. Quotes"/> </a>
   <a href="/Author/Helen-Keller-Quotes/62"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Helen-Keller.jpg" alt="Hellen Keller Quotes"/></a>
   <a href="/Author/Henry-Ford-Quotes/63"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Henry-Ford.jpg" alt="Henry Ford Quotes"/> </a>
   <a href="/Author/Ronald-Reagen-Quotes/64"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Ronald-Reagen.jpg" alt="Ronald Reagen Quotes" /> </a>
   <a href="/Author/Theodore-Roosevelt-Quotes/69"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Theodore-Roosevelt.jpg" alt="Theodore Roosevelt Quotes" /> </a>
   <a href="/Author/Pope-John-Paul-2-quotes/65"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Pope-John-Paul-II.jpg" alt="Pope John Paul 2 Quotes" />   </a>
   <a href="/Author/Abraham-Lincoln-Quotes/55"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Abraham-Lincoln.jpg" alt="Abraham Lincoln Quotes"/> </a>
   <a href="/Author/Vince-Lombardi-Quotes/56" class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Vince-Lombardi.jpg" alt="Vince Lombardi Quotes"/> </a>
   <a href="/Author/Albert-Einstein-Quotes/60"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Albert-Einstein.jpg" alt="Albert Einstein Quotes"/> </a>
   <a href="/Author/Mahatma-Gandhi-Quotes/50"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Mahatma-Gandhi.jpg" alt="Mahatma Gandhi Quotes"/> </a>
   <a href="/Author/Nelson-Mandela-Quotes/59"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Nelson-Mandela.jpg" alt="Nelson Mandela Quotes"/> </a>

</div>

我在每个元素的img标记内设置了alt属性。

我想设置title属性，同时考虑title和alt属性具有相同的值。

是否可以运行任何javascript来设置title属性？

2 个答案:

答案 0 :(得分：4)

使用setAttribute＆amp; getAttribute 

var getChilds = document.querySelectorAll("a.textnone img");
getChilds.forEach(function(item) {
  item.setAttribute('title', item.getAttribute('alt'));
})
<div class="w3-container" id="menuAuthor" style="float:left">
  <a href="/Author/Benjamin-Franklin-Quotes/213" class="textnone  fl"><img class="w3-circle" style="width:40px" src="/images/authors.small/Benjamin-Franklin.jpg" alt="Benjamin Franklin Quotes" /> </a>
  <a href="/Author/Winston-Churchill-Quotes/356" class="textnone fl"><img class="w3-circle" style="width:40px" src="/images/authors.small/Winston-Churchill.jpg" alt="Benjamin Franklin " /> </a>
  <a href="/Author/Thomas-Jefferson-Quotes/253" class="textnone fl"><img class="w3-circle" style="width:40px" src="/images/authors.small/Benjamin-Franklin.jpg" alt="Thomas Jefferson" /> </a>
  <a href="/Author/George-Washington-Quotes/54" " class="textnone fl "><img class="w3-circle "  style="width:40px " src="/images/authors.small/George-Washington.jpg " alt="George Washington "/> </a>
   <a href="/Author/Martin-Luther-King-Jr-Quotes/53 "  class="textnone fl "><img class="w3-circle "  style="width:40px " src="/images/authors.small/Martin-Luther-King-Jr.jpg " alt="Martin Luther King, Jr. Quotes "/> </a>
   <a href="/Author/Helen-Keller-Quotes/62 "  class="textnone fl "><img class="w3-circle "  style="width:40px " src="/images/authors.small/Helen-Keller.jpg " alt="Hellen Keller Quotes "/></a>
   <a href="/Author/Henry-Ford-Quotes/63 "  class="textnone fl "><img class="w3-circle "  style="width:40px " src="/images/authors.small/Henry-Ford.jpg " alt="Henry Ford Quotes "/> </a>
   <a href="/Author/Ronald-Reagen-Quotes/64 "  class="textnone fl "><img class="w3-circle "  style="width:40px " src="/images/authors.small/Ronald-Reagen.jpg " alt="Ronald Reagen Quotes " /> </a>
   <a href="/Author/Theodore-Roosevelt-Quotes/69 "  class="textnone fl "><img class="w3-circle "  style="width:40px " src="/images/authors.small/Theodore-Roosevelt.jpg " alt="Theodore Roosevelt Quotes " /> </a>
   <a href="/Author/Pope-John-Paul-2-quotes/65 "  class="textnone fl "><img class="w3-circle "  style="width:40px " src="/images/authors.small/Pope-John-Paul-II.jpg " alt="Pope John Paul 2 Quotes " />   </a>
   <a href="/Author/Abraham-Lincoln-Quotes/55 "  class="textnone fl "><img class="w3-circle "  style="width:40px " src="/images/authors.small/Abraham-Lincoln.jpg " alt="Abraham Lincoln Quotes "/> </a>
   <a href="/Author/Vince-Lombardi-Quotes/56 " class="textnone fl "><img class="w3-circle "  style="width:40px " src="/images/authors.small/Vince-Lombardi.jpg " alt="Vince Lombardi Quotes "/> </a>
   <a href="/Author/Albert-Einstein-Quotes/60 "  class="textnone fl "><img class="w3-circle "  style="width:40px " src="/images/authors.small/Albert-Einstein.jpg " alt="Albert Einstein Quotes "/> </a>
   <a href="/Author/Mahatma-Gandhi-Quotes/50 "  class="textnone fl "><img class="w3-circle "  style="width:40px " src="/images/authors.small/Mahatma-Gandhi.jpg " alt="Mahatma Gandhi Quotes "/> </a>
   <a href="/Author/Nelson-Mandela-Quotes/59 "  class="textnone fl "><img class="w3-circle "  style="width:40px " src="/images/authors.small/Nelson-Mandela.jpg " alt="Nelson Mandela Quotes "/> </a>

</div>

答案 1 :(得分：2)

获取带有标记名称的所有元素，因为标记名称返回HTMLCollections，Array.from正在将集合转换为数组。 我们可以使用forEach()迭代数组并设置属性。

var images = document.getElementById('menuAuthor').getElementsByTagName('img');

Array.from(images).forEach(function(ele){
  ele['title'] = ele['alt'];
});
<div class="w3-container" id="menuAuthor" style="float:left">
   <a href="/Author/Benjamin-Franklin-Quotes/213"  class="textnone  fl"  ><img class="w3-circle"  style="width:40px" src="/images/authors.small/Benjamin-Franklin.jpg" alt="Benjamin Franklin Quotes"/> </a>
   <a href="/Author/Winston-Churchill-Quotes/356"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Winston-Churchill.jpg" alt="Benjamin Franklin "/> </a>
   <a href="/Author/Thomas-Jefferson-Quotes/253" class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Benjamin-Franklin.jpg" alt="Thomas Jefferson"/> </a>
   <a href="/Author/George-Washington-Quotes/54" " class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/George-Washington.jpg" alt="George Washington"/> </a>
   <a href="/Author/Martin-Luther-King-Jr-Quotes/53"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Martin-Luther-King-Jr.jpg" alt="Martin Luther King, Jr. Quotes"/> </a>
   <a href="/Author/Helen-Keller-Quotes/62"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Helen-Keller.jpg" alt="Hellen Keller Quotes"/></a>
   <a href="/Author/Henry-Ford-Quotes/63"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Henry-Ford.jpg" alt="Henry Ford Quotes"/> </a>
   <a href="/Author/Ronald-Reagen-Quotes/64"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Ronald-Reagen.jpg" alt="Ronald Reagen Quotes" /> </a>
   <a href="/Author/Theodore-Roosevelt-Quotes/69"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Theodore-Roosevelt.jpg" alt="Theodore Roosevelt Quotes" /> </a>
   <a href="/Author/Pope-John-Paul-2-quotes/65"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Pope-John-Paul-II.jpg" alt="Pope John Paul 2 Quotes" />   </a>
   <a href="/Author/Abraham-Lincoln-Quotes/55"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Abraham-Lincoln.jpg" alt="Abraham Lincoln Quotes"/> </a>
   <a href="/Author/Vince-Lombardi-Quotes/56" class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Vince-Lombardi.jpg" alt="Vince Lombardi Quotes"/> </a>
   <a href="/Author/Albert-Einstein-Quotes/60"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Albert-Einstein.jpg" alt="Albert Einstein Quotes"/> </a>
   <a href="/Author/Mahatma-Gandhi-Quotes/50"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Mahatma-Gandhi.jpg" alt="Mahatma Gandhi Quotes"/> </a>
   <a href="/Author/Nelson-Mandela-Quotes/59"  class="textnone fl"><img class="w3-circle"  style="width:40px" src="/images/authors.small/Nelson-Mandela.jpg" alt="Nelson Mandela Quotes"/> </a>

</div>

相关问题
最新问题