Найти и заменить URL внутри <style> - PullRequest
Новая
       7

Найти и заменить URL внутри <style>

0 голосов
/ 30 августа 2018

У меня есть этот CSS: 

    <style> .thumbs{background:url('/img/thumbs.jpg') no-repeat;}</style>

Теперь я хочу найти и заменить URL: /img/thumbs.jpg на http://abc.xyz/img/no-thumb.jpg

Возможно ли это?

Ответы [ 3 ]

0 голосов
/ 30 августа 2018

попробуйте это: 

$(document).ready(function(){
    var background = $('.thumbs').css('background');
    var a = background.split('"');
    var new_image = '';

     $.each(a,function(index, element){
        var str = element.split('/').slice(3,5).join('/');
        if(str == 'img/thumbs.jpg'){
          new_image = 'http://abc.xyz/img/no-thumb.jpg';
        }
    })

    if(new_image !=''){
        $('.thumbs').css('background',"url('"+new_image+"') no-repeat");
    }
})
0 голосов
/ 31 августа 2018

Вы можете переопределить thumbs класс css с дополнительным экземпляром: 

<script type="text/javascript">
    // once head is loaded add style element with class definition that will override .thumbs
    var head = document.getElementsByTagName('head')[0]; // get head dom element
    head.innerHTML += '<style> .thumbs{background:url("https://www.toptal.com/designers/subtlepatterns/patterns/leaves.png") no-repeat;}</style>'; // put additional style at the end of head (this will overide thumbs), you can put any url background here. 
</script>

Рабочий пример ниже (https://jsbin.com/mehuhokopi/edit?html,output):

<html>
  <head>
    <style> .thumbs{background:url('/img/thumbs.jpg') no-repeat;}</style>
    <style>
      .test {
        width: 100%;
        height: 100%;
        background-color: red;
      }      
    </style>
    <script type="text/javascript">
        // once head is loaded add style element with class definition that will override .thumbs
        var head = document.getElementsByTagName('head')[0]; // get head dom element
        head.innerHTML += '<style> .thumbs{background:url("https://www.toptal.com/designers/subtlepatterns/patterns/leaves.png") no-repeat;}</style>'; // put additional style at the end of head (this will overide thumbs), you can put any url background here. 
    </script>        
  </head>
  <body>
    <div class="test thumbs">
    </div>
  </body>
</html>
0 голосов
/ 30 августа 2018 
 window.onload = function(){
       document.getElementByClassName('thumbs').style.background = "url('http://abc.xyz/img/no-thumb.jpg')";
   }
...