Настройка фонового изображения с помощью JavaScript - PullRequest
Новая
       10

Настройка фонового изображения с помощью JavaScript

4 голосов
/ 01 мая 2010

В Chrome, Safari и Opera установка фонового изображения на абсолютную ссылку, например: "/images/image.png" меняет его на "http://sitepath/images/image.png".

Он не делает этого в Firefox.

Есть ли способ избежать такого поведения, или это записано в движке javascript браузера? Использование jquery для установки фонового изображения также решает эту проблему.

Проблема в том, что я размещаю HTML-код в php-скрипте, для которого нужны URL-адреса в этом конкретном формате. Я знаю, что установка относительного пути изображения исправляет это, но я не могу этого сделать.

Единственной альтернативой было бы использование регулярного выражения. конвертировать URL.

Спасибо.

Проверьте это в Firefox и браузере Chrome / WebKit: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="height:400px;width:400px;background-image:url(/images/images/logo.gif);">
</div>
<br />
<br />
<div id="test" style="height:400px;width:400px;">
</div>
<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#test").css('background-image',"url(/images/images/logo.gif)");
        alert(document.getElementById('test').style.backgroundImage);
    });
</script>
</body>
</html>

Ответы [ 3 ]

3 голосов
/ 01 мая 2010

Не совсем точно, как вы помещаете это местоположение в документ, но вы можете использовать window.location.hostname, чтобы получить домен и добавить его. 

var bgImg = window.location.hostname + '/images/images/logo.gif';
$("#test").css('background-image', 'url('+bgImg+')');

Вы бы заменили /images/images/logo.gif тем, как вы сгенерируете изображение (я думаю, на стороне сервера?)

2 голосов
/ 01 мая 2010

Лучшим подходом было бы изменить классы на элементе так, чтобы новый класс изменил изображение на то, что вы хотели. Что-то вроде: 

$("#test").addClass("newClass");

Это гораздо более чистый подход, который лучше ухудшится и позволит правильно разделить проблемы.

Если вам нужно придерживаться изменения встроенного CSS, вам придется использовать абсолютную ссылку, чтобы сохранить ее одинаковой во всех браузерах. 

$("#test").css("background", "url(" + window.location.hostname + "/logo.gif)");
0 голосов
/ 11 июля 2014 
$('#divID').css("background-image", "url(/myimage.jpg)");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...