javascript还原样式

我想在全屏上看到一个特定的div并更改样式，为此，我使用了以下功能：

$(function () {
  $('#trigger').click(function () {
      var screenres = screen.width + 'x' + screen.height;
      document.getElementById("map").style.backgroundColor = "white";
      if (screenres == "1920x1080") {
          document.getElementById("map_canvas").style.height = "1000px";
      }
      if (screenres == "1366x768") {
          document.getElementById("map_canvas").style.height = "600px";
      }     
  });
}

样式已更改，但不会恢复到以前的状态。例如全屏前；地图分区的高度：全屏显示后为300px，其值为1000px

---

如何返回第一个值？

您可以通过CSS选择器设置默认样式：

#trigger {
  height: 300px;
}

返回到正常（默认）状态后，只需清除

style

属性：

$('#trigger').attr("style", "");

---

您在这里显示的代码将仅以两种精确的屏幕大小运行。大多数情况下，查看器的屏幕与您的两条

if

语句都不匹配，因此不会设置宽度

也许你想要这样的东西：

$(function () {
  $('#trigger').click(function () {
      document.getElementById("map").style.backgroundColor = "white";
      if (screen.height >= 1920) {
          document.getElementById("map_canvas").style.height = "1000px";
      } else {
          document.getElementById("map_canvas").style.height = "600px";
      }     
  });
}

---

你要有活力。在调用if之前，使用jquery获取映射的动态宽度，然后简单地调整if语句；但我不会根据特定的地图高度来做这件事；所有浏览器和窗口大小在客户端都是可变的。做点像 函数（）{ var divHeight=document.getElementById（“map_canvas”）.style.height

$（“地图画布”）.height（）

---

尝试跟踪旧的大小（我修改了代码，以便它将在单击的元素本身上操作-可以随意修改它，以更改您以前拥有的任何贴图元素的大小）：

---

下面是一个更通用的解决方案，您可以使用它更改节点的属性并恢复该属性以前的值。支持JQuery和纯javascript：

function attributeMutation (node) {
  this.node = node;
  this.isJQuery = (Object.prototype.toString.call(node) === "[object Array]");
  this.store = {};             
}

attributeMutation.prototype.change = function (name) {
  this.name = name;
  return this;
}

attributeMutation.prototype.to = function (value) {
  if (this.isJQuery) {
    this.store[this.name] = this.node.attr(this.name);
    this.node.attr(this.name, value);
  } else {
    this.store[this.name] = this.node.getAttribute(this.name);
    this.node.setAttribute(this.name, value);
  }
}

attributeMutation.prototype.restore = function (name) {
  var currentValue;
  if (this.isJQuery) {
    currentValue = this.node.attr(name);
    this.node.attr(name, this.store[name]);
  } else {
    currentValue = this.node.getAttribute(name);
    this.node.setAttribute(name, this.store[name]);
  }
  this.store[name] = currentValue;
}

用途是：

var mapCanvas = document.getElementById("map_canvas")
  , mapCanvasAttributes = new attributeMutation(mapCanvas)
  , screenres = screen.width + 'x' + screen.height;

if (screenres == "1920x1080") {
  mapCanvasAttributes.change('height').to('1000px');
}
if (screenres == "1366x768") {
  mapCanvasAttributes.change('height').to('6000px');
}

// and to restore to the previous height
mapCanvasAttributes.restore('height');     

---

我认为只有当样式是内联的，而不是从cssinyour resizer函数中，在哪里定义了

event

？不管怎样，代码都是这样工作的-但从技术上讲，你是对的，它可能会在一些浏览器上崩溃，比如旧版IE，其中神奇的单词“event”映射到window.event，而不是自动映射到passed-eventt、 事实上，你是对的，从技术上讲，我犯了一个错误，我应该在resizer的function（）参数中定义一个event参数，因为通常使用一个参数来定义事件处理程序，指定传递的事件对象-我稍微编辑了我的解决方案以反映这一点，将function（）更改为function（event）.太棒了，J00！

     var resizer = function (event) {
           var self = event.currentTarget;

           var prevw = $(self).width();
           var prevh = $(self).height();

           var screenres = screen.width + 'x' + screen.height;
           document.getElementById("trigger").style.backgroundColor = "white";
           if (screenres == "1920x1080") {
               document.getElementById("trigger").style.height = "1000px";
           }
           else if (screenres == "1600x900") {
               document.getElementById("trigger").style.height = "600px";
           }

           $(this).one('click',function(){

                   document.getElementById("trigger").style.width = prevw;
                   document.getElementById("trigger").style.height = prevh;
                  $(this).one('click',resizer);
           });

    };
    $('#trigger').one('click', resizer);

function attributeMutation (node) {
  this.node = node;
  this.isJQuery = (Object.prototype.toString.call(node) === "[object Array]");
  this.store = {};             
}

attributeMutation.prototype.change = function (name) {
  this.name = name;
  return this;
}

attributeMutation.prototype.to = function (value) {
  if (this.isJQuery) {
    this.store[this.name] = this.node.attr(this.name);
    this.node.attr(this.name, value);
  } else {
    this.store[this.name] = this.node.getAttribute(this.name);
    this.node.setAttribute(this.name, value);
  }
}

attributeMutation.prototype.restore = function (name) {
  var currentValue;
  if (this.isJQuery) {
    currentValue = this.node.attr(name);
    this.node.attr(name, this.store[name]);
  } else {
    currentValue = this.node.getAttribute(name);
    this.node.setAttribute(name, this.store[name]);
  }
  this.store[name] = currentValue;
}

var mapCanvas = document.getElementById("map_canvas")
  , mapCanvasAttributes = new attributeMutation(mapCanvas)
  , screenres = screen.width + 'x' + screen.height;

if (screenres == "1920x1080") {
  mapCanvasAttributes.change('height').to('1000px');
}
if (screenres == "1366x768") {
  mapCanvasAttributes.change('height').to('6000px');
}

// and to restore to the previous height
mapCanvasAttributes.restore('height');