时间戳

首页 > 解决方案 > 设置所有标签大小

javascript - 设置所有标签大小

问题描述

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

https://jsfiddle.net/wbu5qc0o

<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);
   })
})

标签： javascriptjqueryhtml

解决方案

有很多方法可以做到这一点，但如果你只是删除[0]from 。.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>

推荐阅读