Question

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

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。

Answer 1

围绕if语句中的条件和字符串BODY周围的撇号（或引号）需要使用括号。

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

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

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/

Answer 2

这有效：

<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>

Answer 3

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

您可能希望使用流体布局技术（在CSS中使用容器尺寸的百分比值）来确保您的DIV元素相对于查看者屏幕分辨率呈现（读取：它的父母尺寸 - 父母DIV- element或body元素，宽度为100％，表示页面的可用宽度。

div {width:60%}
再次考虑实现背景图像的方式，如果您需要页面上的元素与背景图像对齐，则不应将背景图像设置为background-size:contain，因为这会引入很多麻烦当试图在窗口调整大小时排列所有内容。相反，将背景切片为零件，并将生成的较小图像分配给需要与其对齐的页面的不同部分。
在设计不同分辨率时相关：Media Queries和响应式布局。
您可能需要查看jQuery resize()。 jQuery将负责调整resize事件的不同浏览器实现。
```
$(window).resize(function() {
    $('body').prepend('<div>' + $(window).width() + '</div>');
});
```
此外，通过使用jQuery Events System，这将使您能够更加优雅地实现JavaScript。当然，只有在页面上计划进一步的JavaScript工作时，这才是相关的。我实际上只是为了完成而引用它。

您发布的代码无效。

你错过了以分号结尾的行（虽然代码可能正在运行，因为解释器通常会很好地猜测它。）
无需在body元素上使用ID，只需通过document.getElementsByTagName()。
您需要将标记名称（BODY）放入引号。
将if else语句的条件放入paranthesis。

您的代码应如下所示：

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';
    }
}

如果所有这些都无济于事，那就和我一起，因为我真的只能猜出你的问题是什么。如上所述，指向相关页面的链接将非常有用。

另外，你的问题让人觉得你不熟悉所有这些，如果没有，请执行我的漫无边际。

Answer 4

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

此：

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

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

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

<强>更新

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

更新2：

你的if语句中也有语法错误，正如Mikahil所指出的那样，所以你的函数看起来像这样：

function MOSTRA() {

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

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

Answer 5

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

CSS：

body {
     position: relative;
     width: 100%;
}

用javascript更改类

5 个答案: