Question

如何设置每个<img>标签以具有style="width: 50px;"或width="50"？

<div id="blog">
    <div class="content">
        <img src="https://i.imgur.com/fUty9h8.jpg" />
        <img src="https://i.imgur.com/fUty9h8.jpg" />
        <img src="https://i.imgur.com/fUty9h8.jpg" />
    </div>
</div>

<script type="application/javascript">
    var images = document.getElementById("blog").getElementsByClassName("content")[0].getElementsByTagName("img")[0];

    if (images) {
        for (i = 0; i < images.length; ++i) {
            images[i].style.width = '50px';
        }
    }
</script>

没有循环，仅第一张图像受影响

https://jsfiddle.net/6d7x5w2m/

images.style.width = '50px';

我也尝试过使用jQuery

$(document).ready(function(){
   $('#blog .content img').each(function(){
      $(this).width(50);
   })
})

Answer 1

有很多方法可以执行此操作，但是如果您只是从[0]中删除.getElementsByTagName('img')[0]。它将与您的Java脚本代码一起使用

1。 Javascript

var images = document.getElementById("blog").getElementsByClassName("content")[0].getElementsByTagName('img');

var images = document.getElementById("blog").getElementsByClassName("content")[0].getElementsByTagName('img'); 


    if (images) {
        for (i = 0; i < images.length; ++i) {
            images[i].style.width = '50px';
        }
    }

<div id="blog">
  <div class="content">
    <img src="https://i.imgur.com/fUty9h8.jpg" />
    <img src="https://i.imgur.com/fUty9h8.jpg" />
    <img src="https://i.imgur.com/fUty9h8.jpg" />
  </div>
</div>

2。 jQuery

$('#blog img').width(50);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blog">
      <div class="content">
        <img src="https://i.imgur.com/fUty9h8.jpg" />
        <img src="https://i.imgur.com/fUty9h8.jpg" />
        <img src="https://i.imgur.com/fUty9h8.jpg" />
      </div>
    </div>

3。使用CSS

#blog .content>img{width:50px}

<div id="blog">
      <div class="content">
        <img src="https://i.imgur.com/fUty9h8.jpg" />
        <img src="https://i.imgur.com/fUty9h8.jpg" />
        <img src="https://i.imgur.com/fUty9h8.jpg" />
      </div>
    </div>

Answer 2

您可以按照以下步骤进行操作：-

$('img').css('width', 50);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blog">
  <div class="content">
    <img src="https://i.imgur.com/fUty9h8.jpg" />
    <img src="https://i.imgur.com/fUty9h8.jpg" />
    <img src="https://i.imgur.com/fUty9h8.jpg" />
  </div>
</div>

Answer 3

您可以使用document.querySelectorAll()进行此操作。

var whatToLoad = 2;
function loadMore()
{
    document.getElementsByClassName("row")[whatToLoad].style.display = "block";
    document.getElementsByClassName("row")[whatToLoad + 1].style.display = "block";
    whatToLoad += 2;
}

下面是工作代码：

var images = document.querySelectorAll("img");

var images = document.querySelectorAll("img");
imageArray = Array.prototype.slice.call(images);

imageArray.forEach(function(img) {
  img.style.width = '50px';
});

JSFIDDLE

Answer 4

您可以使用NodeList.prototype.forEach()方法来完成此任务：

document.querySelectorAll('#blog > .content > img').forEach(image => {
  image.style.width = '50px';
});

<div id="blog">
  <div class="content">
    <img src="https://i.imgur.com/fUty9h8.jpg">
    <img src="https://i.imgur.com/fUty9h8.jpg">
    <img src="https://i.imgur.com/fUty9h8.jpg">
  </div>
</div>

设置所有<img/>标签的大小

4 个答案: