Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Замена бакграунд-урлов в css (https://javascript.ru/forum/dom-window/54930-zamena-bakgraund-urlov-v-css.html)

mastersss 07.04.2015 09:38

Замена бакграунд-урлов в css
 
Приветствую!

В файле css прописаны стили и есть десяток дивов с
background-image: url(/images/1.jpg)
как с помощью jquery подобавлять ко всем урлам "http://site.ru/folder1/1", что бы получилось
background-image: url(http://site.ru/folder1/1/images/1.jpg)

Заранее спасибо!

ksa 07.04.2015 09:42

Цитата:

Сообщение от mastersss
и есть десяток дивов с
background-image: url(/images/1.jpg)

Как это понять? Пример челе покажи...

mastersss 07.04.2015 09:58

html:
<div class="circle-1"></div>
<div class="vvv"></div>
<div class="kkkk"></div>
<div class="qwqwqw"></div>
<div class="bnmbnm"></div>
<div class="poipoi"></div>
<div class="circle-7"></div>

css:
.circle-1 {
background: url("images/1_icon2.png") no-repeat 0 0;
}
.vvv {
background: url("images/2_icon2.png") no-repeat 0 0;
}
.kkkk {
background: url("images/3_icon2.png") no-repeat 0 0;
}
.qwqwqw {
background: url("images/4_icon2.png") no-repeat 0 0;
}
.bnmbnm {
background: url("images/5_icon2.png") no-repeat 0 0;
}
.poipoi {
background: url("images/6_icon2.png") no-repeat 0 0;
}
.circle-7 {
background: url("images/7_icon2.png") no-repeat 0 0;
}

вот к урлам нужно дописать "http://site.ru/folder1/1/"

ksa 07.04.2015 10:03

mastersss, JS не меняет "некий" ЦСС... Где он у тебя, кстати, находится? Во внешнем файле цсс? Или в этом же хтмл документе?

mastersss 07.04.2015 10:12

css в этом же хтмл документе

ksa 07.04.2015 10:15

Цитата:

Сообщение от mastersss
css в этом же хтмл документе

Вот серверным языком, при формировании страницы, и меняй те УРЛы...

mastersss 07.04.2015 10:17

Так не получится, там фреймворк генерирует страницу. Остается надежда на jquery :)

ksa 07.04.2015 11:02

Цитата:

Сообщение от mastersss
Остается надежда на jquery

Опробовать нет возможности...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.circle-1 {
	background: url("images/1_icon2.png") no-repeat 0 0;
}
.vvv {
	background: url("images/2_icon2.png") no-repeat 0 0;
}
.kkkk {
	background: url("images/3_icon2.png") no-repeat 0 0;
}
.qwqwqw {
	background: url("images/4_icon2.png") no-repeat 0 0;
}
.bnmbnm {
	background: url("images/5_icon2.png") no-repeat 0 0;
}
.poipoi {
	background: url("images/6_icon2.png") no-repeat 0 0;
}
.circle-7 {
	background: url("images/7_icon2.png") no-repeat 0 0;
}
</style>
<script type='text/javascript'>
$(function(){
	$('.my').each(function(){
		var re=/^.*(images\/\d+_icon2\.png)(?=\)$)/
		var url=$(this).css('background-image');
		url=url.replace(re,'url(http://site.ru/folder1/1/$1')
		$(this).css('background-image',url);
		$(this).text(url);
	});
});
</script>
</head>
<body>
<div class="my circle-1"></div>
<div class="my vvv"></div>
<div class="my kkkk"></div>
<div class="my qwqwqw"></div>
<div class="my bnmbnm"></div>
<div class="my poipoi"></div>
<div class="my circle-7"></div>
</body>
</html>

mastersss 07.04.2015 11:55

Спасибо!


Часовой пояс GMT +3, время: 09:58.