通过Javascript查找图像宽度并应用于wordpress中的包装器div

Posted 2023-05-09

【中文标题】通过Javascript查找图像宽度并应用于wordpress中的包装器div

【英文标题】：Find image width & apply to wrapper divs in wordpress via Javascript

【发布时间】：2014-11-24 13:20:56

【问题描述】：

我想找到一种方法，让包装器 div 的宽度成为其中的图像（特色图像）的大小，使它们彼此等距。

我想我可能在这里找到了答案：http://www.webmasterworld.com/javascript/3724001.htm（底部的解决方案）但我不确定如何将它应用到我的网站：http://amuletts.com/barbaragorayska/

可能是这样的……？

    window.onload=function() 
    setCaptions();
    

    function setCaptions() 
    var picwidth=[];
    var containerDiv=document.getElementById('#primary-home');
    var dvs=containerDiv.getElementsByTagName('div');
    for(var c=0;c<dvs.length;c++) 
    if(dvs[c].id=='homepage-article .featured-image') 
    picwidth[c]=dvs[c].getElementsByTagName('img')[0].clientWidth;
    dvs[c].style.width=picwidth[c]+'px';
    
    
    

【问题讨论】：

那么...你的尝试效果如何？

【参考方案1】：

只需使用 jQuery：

<script type="text/javascript">
jQuery( document ).ready(function($) 
  $('.article-wrapper').each(function()
    var width = $(this).find('img').width;
    $(this).css('width',width+'px');
    var height = $(this).find('img').height;
    $(this).css('height',height+'px');
  );
);
</script>  

【讨论】：

感谢您的帮助。

【参考方案2】：

我在 wordpress 寻求帮助并得到了这个 javascript，它就像一个魅力。

var $ = jQuery,
articles = $('.article-wrapper'),
widths = 0,
target = $('#primary-home');

articles.each(function() 

widths += $(this).width();

 );

target.css('width', widths);

有人告诉我，它应该可以通过 CSS 实现。如果我确实设法让它以这种方式工作，我会再次发布如何。