Question

我正在向我的网站添加代码，以便我的徽标适当调整大小。

我为徽标编写了一个JavaScript函数，可根据窗口宽度调整大小。不幸的是，当我这样做时，徽标只是恢复到原来的大小。如果我将内嵌样式应用于图像以设置宽度，它可以工作，但如果图像的大小由CSS文件或我的JavaScript决定，则徽标仍保持其原始大小。

这是我的index.html文件的头部：

 <!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Computer Repair and Services</title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Athena Harting" />
        <link rel="shortcut icon" href="../favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/default.css" />
        <link rel="stylesheet" type="text/css" href="css/component.css" />
        <script src="js/modernizr.custom.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="js/MobileMenu.js"></script>
        <script src="js/WidthMargin.js"></script>
        <script src="js/MobileLogo.js"></script>
    </head>
    <body>
        <div class="container">
            <header>
                <div class="logospace" id="logospace"><img src="imgs/Logo_Glossy_Web.png"/></div>
                <h1>Athenian Computers<span>Founded and operated out of Shoreline, WA</span></h1>
            </header>

您会注意到我在此文件中引用了MobileLogo.js和default.css文件。

以下是我的default.css文件中应该应用于我的徽标的相关代码：

/* TEST STUFF */

.logospace {
    width: 200px;
    height: 200px;
}

这是我的MobileLogo.js文件。此文件应根据页面宽度适当调整我的徽标大小：

var resize = function(){

  var wi = $(window).width();

  if(wi <= 519){
    $("#logospace").css({
        'width' : '50px'
        'height' : '50px'

        });
    }
  else if (wi <= 799){
      $("#logospace").css({
          'width' : '100px'
        'height' : '100px''

        });
    }
  else if (wi <= 980){
    $("#logospace").css({
        'width' : '150px'
        'height' : '150px'

      });
    }
  else{
    $("#logospace").css({
        'width' : '200px'
        'height' : '200px'

      });
    }
}

$(window).ready(function() {
    resize();

    $(window).resize(function() {
      resize();
    });
});

任何人都能说出错误吗？

Answer 1

'中有额外的'height' : '100px''。您可能想要将其删除。

Answer 2

除了额外的'之外还有其他问题：您在样式定义之间缺少逗号：

$("#logospace").css({
    'width' : '50px', <-------- HERE, since it seems tough to see for some
    'height' : '50px'
});

缺少的逗号会引发语法错误，这会停止整个代码。您拨打css()的所有电话都缺少这些内容。

Answer 3

修改
图像周围的div正在调整大小;当窗口调整大小时，div会调整大小。问题是图像不是，如fiddle中所示。我把div的高度设得更大，以显示问题要解决此问题，请将id或类（或两者）分配给图像，而不是其父div。

JavaScript未按预期更新网站徽标大小

3 个答案: