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

ここに示したコードは、2つの正確な画面サイズでのみ実行されます。ほとんどの場合、ビューアの画面は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";
      }     
  });
}
于 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

以下は、ノードの属性を変更し、その属性の以前の値を復元するために使用できる、より一般的なソリューションです。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 に答える
0

CSSセレクターを介してデフォルトのスタイルを設定できます。

#trigger {
  height: 300px;
}

そして、通常の（デフォルトの）状態に戻った後、style属性をクリアするだけです。

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

あなたはダイナミックにならなければなりません。jquery を使用して、if 呼び出しの前にマップの動的な幅を取得し、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 に答える