添加背景IMG如果屏幕分辨率宽度> 1028

我是相当新的JavaScript。如果屏幕分辨率宽度大于1028像素，我写了一个非常简单的脚本来添加背景图像。

不幸的是，尝试此操作后（在另一台计算机上，800x600分辨率），它不起作用。

我不是找伸展的形象，只是简单地添加它，如果屏幕分辨率宽度大于或等于1024

下面是代码：

<SCRIPT language="JavaScript"> 
    <!-- 
    document.write('<style type="text/css">div#container_header_body {background-image:url(\''); 
    if (screen.width<1024) 
    { 
    document.write('none;'); 
    } 
    else 
    { 
     document.write('images/mmmgirl.png'); 
    } 
    document.write('\');</style>'); 
    //--> 
    </SCRIPT> 

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

任何人可以给我对我做错了什么有所了解？

非常感谢。我已经从这个地方学到了很多东西。

- - 安德鲁

来源

2012-01-11 Andrew

PS。 ''！''和'// - >'可以安全地省略，就像'language'属性一样。看起来你正在使用古老的JavaScript tuturial。获取信息的更好的地方是Mozilla开发者网络：https：//developer.mozilla.org/ – 2012-01-11 22:40:09

尝试this jsfiddle：

var screenWidth = screen.width, 
    container = document.getElementById('container_header_body'); 

console.log(screenWidth); 

if (screenWidth > 1024) { 
    container.style.backgroundImage = 'url(http://oddanimals.com/images/lime-cat.jpg)'; 
} else { 
    container.style.backgroundImage = 'none'; 
}

来源

2012-01-11 22:40:55

真棒，这工作完美，谢谢！ – Andrew 2012-01-11 23:13:55

http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question，对于答案*也是如此。 – 2012-01-11 23:16:49

无需JavaScript中，只使用一个CSS media query：

@media all and (min-width: 1024px) { 
    background-image: url(images/mmmgirl.png); 
}

来源

2012-01-11 22:35:51

有趣！它适用于所有浏览器吗？如果是这样，我喜欢这个答案！ – 2012-01-11 22:42:05

@GraceShao [所有现代浏览器]（http://caniuse.com/#feat=css-mediaqueries）都支持它。 IE版本9. – 2012-01-11 22:48:18

添加背景IMG如果屏幕分辨率宽度> 1028

回答

相关问题