如何使用javascript根据页面更改徽标？_Javascript_Html_Image

如何使用javascript根据页面更改徽标？

javascript html image

如何使用javascript根据页面更改徽标？,javascript,html,image,Javascript,Html,Image,我正在尝试设置我的徽标，以便在台式机上显示更大的徽标，在智能手机等小型设备上显示更小的图像这是我一直尝试到现在，但它不起作用有人能帮我吗？我的代码怎么了 <html> <head> <script type="text/javascript"> function load(){ document.getElementById('logo').src = displaylogo(); } function displaylogo(){ if

我正在尝试设置我的徽标，以便在台式机上显示更大的徽标，在智能手机等小型设备上显示更小的图像

这是我一直尝试到现在，但它不起作用

有人能帮我吗？我的代码怎么了

<html>
<head>
<script type="text/javascript">
function load(){
    document.getElementById('logo').src = displaylogo();
}
function displaylogo(){
    if ($(window).width() < 1024) {// code for small viewports
        return "http://i.imgur.com/ozYV740.png"; // small logo
    } 
    else {// code for large viewports
        return "http://i.imgur.com/RMV6Af0.png"; //big logo
    }
}
</script>
</head>
<body onload="load()">
    <img src="http://i.imgur.com/RMV6Af0.png" id="logo" name="logo" title="The original logo is the big logo"/>
</body>
</html>


函数加载（）{
document.getElementById（'logo'）.src=displaylogo（）；
}
函数displaylogo（）{
if（$（window）.width（）<1024）{//用于小视口的代码
返回“http://i.imgur.com/ozYV740.png“；//小徽标
} 
else{//用于大型视口的代码
返回“http://i.imgur.com/RMV6Af0.png“；//大标识
}
}

因为您没有使用

jquery

请在您的案例中尝试以下方法：

要在JS中工作：

if (window.innerWidth < 1024) {// code for small viewports
    //^^^^^^^^^^^

CSS:

您应该使用CSS媒体查询来处理网页在不同设备上的显示方式。这些查询允许您根据用户屏幕的宽度应用不同的样式

例如，要调整手机徽标的大小，请尝试：

/* Desktops (>480px) */
#logo {
  width: 200px;
  height: 200px;
}

/* iPhone landscape (480px) */
@media screen and (max-width: 480px) {
  #logo {
    width: 100px;
    height: 100px;
  }
}

教程：

尝试使用媒体查询

<head>
     <style>
          .logo {
                width: //logo-width
                height : //logo-height
                background-image : url('http://i.imgur.com/RMV6Af0.png');
           }

           @media only screen 
           and (max-device-width : 1024px) {
                .logo {
                    width: //logo-width
                    height : //logo-height
                    background-image : url('http://i.imgur.com/ozYV740.png');
                }
           }
     </style>
</head>
<body>
<div class="logo">
</div>
</body>


.标志{
宽度：//logo宽度
高度：／标志高度
背景图像：url（'http://i.imgur.com/RMV6Af0.png');
}
@仅媒体屏幕
和（最大设备宽度：1024px）{
.标志{
宽度：//logo宽度
高度：／标志高度
背景图像：url（'http://i.imgur.com/ozYV740.png');
}
}

了解您使用jquery吗？不，只是代码，没有jquery，但如果使用jquery可以解决我的问题，我会尝试。没有jquery，代码就无法工作，这是jquery检查窗口宽度的方法。如果您确实需要JS解决方案，请尝试

window.innerWidth<1024

。正如@arbitter所建议的，使用@media更改单个图像的大小，而不是尝试加载两个单独的图像。@m3tsys我添加了更多信息。

#logo {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url(http://i.imgur.com/ozYV740.png) no-repeat; /* small */
}
@media screen and (min-width: 1024px) {
    #logo {
        width: 100px;
        height: 100px;
        background: url(http://i.imgur.com/RMV6Af0.png) no-repeat; /* big */
    }
}

/* Desktops (>480px) */
#logo {
  width: 200px;
  height: 200px;
}

/* iPhone landscape (480px) */
@media screen and (max-width: 480px) {
  #logo {
    width: 100px;
    height: 100px;
  }
}

<head>
     <style>
          .logo {
                width: //logo-width
                height : //logo-height
                background-image : url('http://i.imgur.com/RMV6Af0.png');
           }

           @media only screen 
           and (max-device-width : 1024px) {
                .logo {
                    width: //logo-width
                    height : //logo-height
                    background-image : url('http://i.imgur.com/ozYV740.png');
                }
           }
     </style>
</head>
<body>
<div class="logo">
</div>
</body>