为什么el.style.backgroundImage在这个功能上下文中不起作用？

Question

我为这个问题写了一个答案:根据url的新背景,我在答案中发布的代码是检查URL是否存在特定字符串,如果存在,则更改给定元素的背景图像.

所以!我是我,我以为我会尝试避免使用jQuery,并使用以下方法寻找更传统的vanilla JavaScript方法:

var images = {
    'halloween' : '/images/newbackground.jpg',
    'christmas' : '/images/xmasbackground.jpg'
};

var url = document.location.href,
    elem = document.getElementById('elementThatYouWantToStyle');

for (var keyword in images){
    if (images.hasOwnProperty(keyword) && url.indexOf(keyword) !== -1) {
        elem.style.backgroundImage = images[keyword];
    }
}

来源.

然后我认为我会转换为功能方法,所以它变成了这样:

var images = {
    'halloween': 'http://davidrhysthomas.co.uk/img/dexter.png',
    'christmas': 'http://davidrhysthomas.co.uk/img/mandark.png'
};

function setBG(el, map, url) {
    if (!el || !map) {
        return false;
    }
    else {
        var url = url || document.location.href,
            el = el.nodeType == 1 ? el : document.getElementById(el);
        for (var keyword in map) {
            if (map.hasOwnProperty(keyword) && url.indexOf(keyword) !== -1) {
                el.style.backgroundImage = encodeURIComponent(map[keyword]);
            }
        }
    }
}

setBG('one', images, 'http://some.domain.com/with/halloween.jpg');
setBG(document.getElementById('two'), images, 'http://some.domain.com/with/christmas.jpg');

JS小提琴演示.

现在,如果我加入console.log()到if了内评估for...in环路它表明我们正在进入死循环,和控制台提示我有一个准确的参考DOM节点,图像对象,该URL(作为传递给函数)并从对象中获取正确的值.

下面这行,但是,在我尝试设置el.style.backgroundImage属性,也没有工作(这是真的我是否不包裹map[keyword]在encodeURIComponent()与否虽然我只与中,我尝试做了这样:有什么我的逻辑中存在明显的缺陷？为什么el.style.backgroundImage不设置？

(顺便说一句,JS Liddle的JS Lint 似乎对它很满意(除了重新定义现有的变量(url和el)以便进行回退/默认).

Answer 1

backgroundImage除非您将URL 包装在中,否则URL不是有效值url().

el.style.backgroundImage = 'url(' + map[keyword] + ')';

小提琴

此外,您不应该encodeURIcomponent使用整个URL,否则它甚至会对协议:和协议进行编码/,导致404(由于现在缺少协议)被解释为相对URL:

获取http://fiddle.jshell.net/_display/http%3A%2F%2Fdavidrhysthomas.co.uk%2Fimg%2Fdexter.png 404(未找到)

相反,为了更安全地编码完整的URI,您可以使用encodeURI:

el.style.backgroundImage = 'url("' + encodeURI(map[keyword]) + '")';

小提琴

注意: MDN提到encodeURI在具有GET请求的不同浏览器中可能无法按预期工作,即包含查询字符串的URL.我无法重现那个问题.

同样如@jfriend00所述,var之前的关键字url是不必要的,因为它已经属于函数作用域,因为它被声明为形式参数.阅读更多:JavaScript范围和提升

Answer 2

您正在声明一个已定义为参数的局部变量url,您还需要使用该表单.var urlurlurl(http:/xxxx)

更改为此(var在前面删除url并添加url()了网址):

function setBG(el, map, url) {
    if (!el || !map) {
        return false;
    }
    else {
        url = url || document.location.href;
        el = el.nodeType == 1 ? el : document.getElementById(el);
        for (var keyword in map) {
            if (map.hasOwnProperty(keyword) && url.indexOf(keyword) !== -1) {
                el.style.backgroundImage = 'url(' + map[keyword] + ')';
            }
        }
    }
}