开发者问题收集

使用 javascript 更改类

2012-07-11
365
javascript html css

我有一个使用 body 背景图像的网站。当浏览器调整大小时，我想更改 body 类。

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()">

我以为类会改变（更改为 Background-size:auto），但事实并非如此。 我如何更改背景大小或整个类？我不能使用 Javascript、HTML 或 CSS 以外的其他方法。

3个回答

您需要在 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/

Guffa
2012-07-11

这有效： 

<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>
Besnik
2012-07-11

不太确定您实际上想要实现什么（您正在处理的页面的链接会很有帮助），不过我想到了以下内容：

  • 您可能希望使用流体布局技术（在 CSS 中使用百分比值表示容器尺寸）来确保您的 DIV 元素相对于查看者的屏幕分辨率进行渲染（阅读：它的父级尺寸 - 父级 DIV 元素或 body 元素，其宽度为 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';
}
}

如果以上这些都无济于事，请耐心听我说，因为我真的只能猜测你的问题是什么。如前所述，指向相关页面的链接会很有帮助。

此外，你的问题给人的印象是，你对所有这些都不熟悉，如果不是，请原谅我的漫无边际。

Marco Kerwitz
2012-07-11