Question

这个问题可能真的很小，但我无法弄明白。我目前正在研究自己的tumblr主题，但问题可能与tumblr没什么关系。

我尝试做的是一个for循环，检查图片是否小于500px宽。然后我想调整包含较小图像的div，使它们具有背景和边框。这是html和脚本：

<div class="photo">
  <div class="image">
   <img class="post-image" alt="alt" src="img-source">
  </div>
</div>

<script type="text/javascript">
  var element = document.getElementsByClassName('image');
  var elements = document.getElementsByClassName('post-image');
  for (var i=0, c=0; i<elements.length, c<element.length; i++, c++) {
    if ($(elements[i]).width() < 499){
      $(element[c]).css({
        'padding-top'   :   16 + 'px',
        'padding-bottom':   10 + 'px',
        'background'    :   '#222222',
        'border'        :   1 + 'px solid #353535'
      });
    }
  }
</script>

这一切都适用于tumblr的“编辑主题”部分。但它并没有在实际的博客上。也许这里有人可以帮我搞清楚吗？是的，我在标题中包含了JQuery Api。

Answer 1

当我通过控制台进入时，它工作正常，所以我会采取刺，并说它太早了。您需要等待页面完成加载，然后执行代码。既然你已经有了jQuery，那就简单了：

$(document).ready(function () {
    var element = document.getElementsByClassName('image');
    var elements = document.getElementsByClassName('post-image');
    for (var i = 0, c = 0; i < elements.length, c < element.length; i++, c++) {
        if ($(elements[i]).width() < 499) {
            $(element[c]).css({
                'padding-top': 16 + 'px',
                'padding-bottom': 10 + 'px',
                'background': '#222222',
                'border': 1 + 'px solid #353535'
            });
        }
    }
});

javascript只能在tumblr上远程工作

1 个答案: