时间戳

首页 > 解决方案 > 具有特定条件的java脚本中的样式

javascript - 具有特定条件的java脚本中的样式

问题描述

var res=document.getElementById("panel");
    var wid = window.innerWidth;
if(wid <= 900){
    res.setAttribute("id", "panel2");
}

我想更改一些样式取决于浏览器的大小（使其更具响应性），但我尝试过的没有奏效:(

查看更多：https ://ahmadahmadahmad.000webhostapp.com/

标签： javascript

解决方案

您的 javascript 代码仅在加载时执行一次。
要在发生某些事情时调用该函数，您需要将其附加到事件侦听器。

在这种情况下，您可能希望在调整屏幕大小时更改面板。
因此，将该函数附加到window.onresize事件侦听器。
当您调整屏幕大小时，该功能将被触发。

代码如下。（我以body元素为例）

var res=document.querySelector("body");

window.onresize = function () {
  var wid = window.innerWidth;
  if(wid <= 900){
      res.setAttribute("style", "background-color: red;");
  }
}

您可以拖动屏幕大小查看宽度低于 900px 时背景颜色是否发生变化。
这是你想要达到的目标吗？

推荐阅读