0

我有一个使用身体背景图片的网站。调整浏览器大小时，我想更改正文类。

JavaScript：

function MOSTRA() {
   var SCR = screen.availWidth
   var BRW = window.outerWidth

   if BRW < SCR {
      document.getElementById(BODY).className = 'BDYL'
   }
   else { 
      document.getElementById(BODY).className = 'BDNL' 
   }
}

HTML：

<body id="BODY" class="BDNL" onResize="MOSTRA()">

我以为课程会改变（改为背景大小：自动），但事实并非如此。如何更改背景大小或整个班级？我只能使用 Javascript、HTML 或 CSS。

4

5 回答 5

4

您需要在语句中的条件周围加上括号，if在字符串周围加上撇号（或引号）BODY。

此外，您应该用分号分隔行。如果语句可以在该行结束，脚本解析器会自动将它们添加到行尾，但如果您忘记了结束括号，则可能会收到意外的错误消息，因此解析器无法自动添加分号。

您可能还想从onloadbody 的事件中调用该函数，以便在页面加载时设置类。

function MOSTRA() {

  var SCR = screen.availWidth;

  var BRW = window.outerWidth;

  if (BRW < SCRI) {
    document.getElementById('BODY').className = 'BDYL';
  } else {
    document.getElementById('BODY').className = 'BDNL';
  }
}

演示：http: //jsfiddle.net/Guffa/q56WM/

于 2012-07-11T22:23:41.650 回答
1

不完全确定您实际上要实现的目标（指向您正在处理的页面的链接会有所帮助），但我想到了以下内容：

  • 您可能希望使用流畅的布局技术（在 CSS 中使用容器尺寸的百分比值）来确保您的 DIV 元素相对于查看器的屏幕分辨率呈现（阅读：它的父尺寸 - 父 DIV 元素或正文元素，这将是 100% 的宽度，代表您页面的可用宽度。

    div {width:60%}

  • 再想想你实现背景图像的方式，如果你需要页面上的元素与背景图像对齐，你不应该设置背景图像，background-size:contain因为这会在尝试调整窗口大小时引入很多麻烦。相反，将您的背景分割成多个部分，并将生成的较小图像分配给需要与其对齐的页面的不同部分。

  • 设计不同分辨率时相关：媒体查询和响应式布局。

  • 您可能需要检查jQuery resize()。jQuery 将负责调整大小事件的不同浏览器实现。

    $(window).resize(function() {
    $('body').prepend('<div>' + $(window).width() + '</div>');
});

    此外，这将使您有可能通过使用jQuery 事件系统来更优雅地实现 JavaScript 。当然，这仅在页面上计划了任何进一步的 JavaScript 工作时才相关。我实际上只是为了完成而引用它。

  • 您发布的代码无效。

    • 您错过了行尾分号（尽管代码可能正在工作，因为解释器通常会很好地猜测它）。
    • 无需在 body 元素上使用 ID，只需通过document.getElementsByTagName().
    • 您需要将标签名称 (BODY) 放在引号中。
    • 将 if else 语句的条件放入括号中。

    您的代码应如下所示：

    function MOSTRA() {

    var SCR = screen.availWidth;
    var BRW = window.outerWidth;

    if (BRW < SCR) {
        document.getElementsByTagName('BODY').className = 'BDYL';
    } else { 
        document.getElementsByTagName('BODY').className = 'BDNL';
    }
}

    或者正如 MaxArt 指出的那样，只需使用document.body

    function MOSTRA() {

    var SCR = screen.availWidth;
    var BRW = window.outerWidth;

    if (BRW < SCR) {
        document.body.className = 'BDYL';
    } else { 
        document.body.className = 'BDNL';
    }
}

如果所有这些都没有帮助，请耐心等待，因为我真的只能猜测您的问题是什么。如前所述，指向相关页面的链接会有所帮助。

另外，您的问题给人的印象是您对所有这些都是新手，如果不是，请原谅我的漫无边际。

于 2012-07-11T22:49:21.813 回答
1

这有效：

<script type="text/javascript">
window.onload = function () {
  window.onresize = function (evt) {
    var width = window.innerWidth || 
     (window.document.documentElement.clientWidth || window.document.body.clientWidth);

    if (width < screen.width)
    {
        document.body.className = 'BDYL';
    }
    else
    {
        document.body.className = 'BDNL';
    }

  }
};
</script>
于 2012-07-11T22:31:50.533 回答
0

您的代码中有语法错误。您没有将字符串传递给getElementById().

这个：

document.getElementById(BODY).className = 'BDYL'

应该是这样（带引号，使其成为字符串）：

document.getElementById("BODY").className = 'BDYL'

更新：

或者正如 MaxArt 在他的评论中指出的那样，只是document.body.className = "BDYL"

更新 2：

正如 Mikahil 所指出的，您的 if 语句中也存在语法错误，因此您的函数可能看起来像这样：

function MOSTRA() {

  var SCR = screen.availWidth,
      BRW = window.outerWidth;

  if (BRW < SCRI) {
    document.body.className = 'BDYL';
  } else {
    document.body.className = 'BDNL'; 
  }
}
于 2012-07-11T22:22:20.730 回答
0

我不明白你为什么需要为此使用 JavaScript。

CSS：

body {
     position: relative;
     width: 100%;
}
于 2012-07-11T22:22:26.843 回答