如何替换部分样式背景:Blogger小部件中的网址

时间:2019-05-17 20:05:02

标签: javascript jquery html css blogger

首先,对不起,我是一个完全新手,我敢肯定我会在某个地方使用错误的术语。

我正在尝试在“最近的帖子”小部件和“随机帖子”小部件中提高图像的分辨率。

我需要一段代码来替换“ a class =“ mag-thumb”的“ background:url”的一部分,该代码需要将URL中的“ / s72-c /”替换为“ / s300 / “

例如

https://4.bp.blogspot.com/-0STAMmB_Qws/W3bMkXzc2aI/AAAAAAAAKec/zxATGYlKdFM61Y343kTGa1C5FNli11Y9ACLcBGAs/s72-c/s_tronic2_en__download.jpg

将成为

https://4.bp.blogspot.com/-0STAMmB_Qws/W3bMkXzc2aI/AAAAAAAAKec/zxATGYlKdFM61Y343kTGa1C5FNli11Y9ACLcBGAs/s300/s_tronic2_en__download.jpg

我正在使用此主题-> https://www.themexpose.com/2017/09/seoboost-best-seo-optimized-blogger.html

在此处的测试博客上-> https://andybuckdetailing.blogspot.com/

该网站上已经运行了一部分jQuery代码,可以完全满足我的要求,但仅适用于Popular Posts小部件。但是,由于“热门帖子”小部件的编写方式,我不能只为“随机”和“最近帖子”小部件进行复制和修改。

热门帖子具有img src,而“最新帖子”使用样式背景。

非常感谢您的帮助!

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var dimension = 150;
    $('#PopularPosts1,#PopularPosts2,#PopularPosts3').find('img').each(function(n, image) {
        var image = $(image);
        image.attr({
            src: image.attr('src').replace(/s72-c/, 's' + dimension)
        })
    })
});


//]]>
</script>

我在下面尝试了@Bassam的解决方案,但可能未正确将其输入到代码中,因此将其直接放在上面的脚本下方,格式如下:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('.mag-thumb').each(function () {
        var img = this.style.background;
        this.style.background = img.replace('/s72-c/', '/s300/');
});

//]]>
</script>

第二次尝试@Bassam的解决方案。

    </div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('.mag-thumb').each(function () {
        var img = this.style.background;
        this.style.background = img.replace('/s72-c/', '/s300/');
});

//]]>
</script>

</body>

尝试使用@Bassam的解决方案,可以在上面链接的测试博客上进行直播,是否可以帮助任何人确定其为何不起作用。

    </div>

<script>
//<![CDATA[
    $('.mag-thumb').each(function () {
        var img = this.style.background;
        this.style.background = img.replace('/s72-c/', '/s300/');
    });
//]]>
</script>

</body>

1 个答案:

答案 0 :(得分:0)

使用它来操纵.mag-thumb的背景属性

<script>
//<![CDATA[
document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
     $('.mag-thumb').each(function () {
       var img = this.style.background;
       this.style.background = img.replace('/s72-c/', '/s300/');
    });
  }
}
//]]>
</script>