用javascript更改类

Change Class with javascript

本文关键字：javascript      更新时间：2023-09-26

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

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

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

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

这是有效的：

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

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

  • 您可能需要使用流体布局技术（在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';
    }
}

如果所有这些都无济于事，请耐心等待，因为我真的只能猜测你的问题是什么。正如所说，有问题页面的链接会很有帮助。

此外，你的问题给人的印象是，你对这一切都是新手，如果不是，请原谅我的漫无边际。

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

CSS：

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

您的代码中存在语法错误。您没有将字符串传递给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'; 
  }
}
相关文章：