时间戳

首页 > 解决方案 > 如何仅使用 javascript 插入 3 个具有不同属性值的源标签？

javascript - 如何仅使用 javascript 插入 3 个具有不同属性值的源标签？

问题描述

在我的 HTML 中，我有一个图片标签，其中有一张图片作为孩子。使用 JavaScript，如何插入 3 个具有不同值的 2 个属性的源标签？我已将当前代码和预期结果放在下面。

我能够将相同的字符串插入到值中。但是，我无法使每个字符串都不同。

我从这段代码开始

const PIC = document.querySelector('picture');
const IMAGE = document.querySelector('img');

for (var i = 0; i < 3; i++) {
  var source = document.createElement('source'); //created Source element
  var media = '(max-width:250px)';

  source.setAttribute('media', media); //Set its media attribute 
  //created srcset attribute
  var imgSrc = IMAGE.getAttribute('src'); //Img src 
  var width = 200;
  var arr = [];
  // strip off last 8 chars of image name
  imgSrc = imgSrc.slice(0, -8);
  arr[i] = imgSrc + '-' + width + '.jpg';
  width += 200;
  var srcset = arr.join(); //imgSrc + '-' + width + '.jpg'; 

  source.setAttribute('srcset', srcset);
  //  console.log(source.outerHTML)
  var insert = PIC.insertBefore(source, PIC.firstChild);
}
console.log(PIC.outerHTML)
<picture>
  <img src="images/turtle2-800.jpg" alt="sea turtle">
</picture>

并且需要创建此代码。仅使用 Javascript。 

<picture>
    <source media="(max-width:250px)" srcset="images/turtle2-200.jpg">
    <source media="(max-width:450px)" srcset="images/turtle2-400.jpg">
    <source media="(min-width:451px)" srcset="images/turtle2-800.jpg">
    <img src="images/turtle2-800.jpg" alt="sea turtle">
</picture>

标签： javascript

解决方案

只需将宽度移到数组之外：

const PIC = document.querySelector('picture');
const IMAGE = document.querySelector('img');

var widths = [200,400,800], mW = [250,450,451]

for (var i = 0; i < 3; i++) {
  var source = document.createElement('source'); //created Source element
  var media = '(max-width:'+mW[i]+'px)';
  source.setAttribute('media', media); //Set its media attribute 
  //created srcset attribute
  var imgSrc = IMAGE.getAttribute('src'); //Img src 
  // strip off last 8 chars of image name
  imgSrc = imgSrc.slice(0, -8);
  var srcset = imgSrc + '-' + widths[i] + '.jpg'; 
  source.setAttribute('srcset', srcset);
  var insert = PIC.insertBefore(source, PIC.firstChild);
}
console.log(PIC.outerHTML)
<picture>
  <img src="images/turtle2-800.jpg" alt="sea turtle">
</picture>

推荐阅读