1

我想在全屏上查看特定的 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。

我怎样才能返回第一个值？

4

6 回答 6

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";
                }

            });
于 2012-09-04T07:13:26.070 回答
1

您在此处显示的代码只能在两种精确的屏幕尺寸下运行。大多数情况下，查看器的屏幕与您的两个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";
      }     
  });
}
于 2012-09-04T07:14:08.527 回答
1

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

     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);
于 2012-09-04T07:18:21.627 回答
0

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

#trigger {
  height: 300px;
}

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

$('#trigger').attr("style", "");
于 2012-09-04T07:12:18.470 回答
0

你得动起来。在 if 调用之前使用 jquery 获取地图的动态宽度，然后简单地调整 if 语句；但我不会根据特定的 map_canvas 高度来做；所有浏览器和窗口大小在客户端都是可变的。做类似 function () { var divHeight = document.getElementById("map_canvas").style.height;

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

        });
于 2012-09-04T07:17:15.613 回答
0

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