Question

我希望在全屏和更改样式上看到特定的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";
      }     
  });
}

样式已更改，但不会返回其原状态。例如在全屏之前;地图div的高度：全屏后的300px，其值为1000px。

如何返回第一个值？

Answer 1

 $(function () {
var DivHeight = document.getElementById("map_canvas").style.height;

// Use this DivHeight  whenever you want uese, you can also get it using jquery $("#map_canvas").height();

            $('#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";
                }

            });

Answer 2

您在此处显示的代码只能以两种确切的屏幕尺寸运行。大多数情况下，查看者的屏幕将与您的两个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";
      }     
  });
}

Answer 3

尝试跟踪旧的大小（我修改了代码，以便它可以对单击的元素本身进行操作 - 随意修改它以更改之前所有地图元素的大小）：

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

Answer 4

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

#trigger {
  height: 300px;
}

在您返回正常（默认）状态后，您只需清除style属性：

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

Answer 5

你必须充满活力。在if调用之前使用jquery获取地图的动态宽度，然后只需调整if语句;但我不会根据具体的map_canvas高度做到这一点;所有浏览器和窗口大小在客户端都是可变的。做点什么 function（）{ var divHeight = document.getElementById（“map_canvas”）。style.height;

$（ “＃map_canvas” 的）高度（）;

        $('#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";
            }

        });

Answer 6

下面是一个更通用的解决方案，您可以使用它来更改节点的属性并恢复该属性的先前值。支持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');

javascript恢复样式

6 个答案: