jsは隠し要素の幅と高さを取得します

非表示要素の物理サイズを取得します (表示:なし)

問題とシナリオ

そのような入力ボックスがある場合は、クリックして選択範囲を展開します。以下に示すように:

入力ボックスとその下の拡張領域は分離されており、2 つの独立したコントロールです。初期状態の下にあるオプションのボックスは非表示(ng-show=false)になります

拡張領域内のアコーディオンコンポーネント(図の都道府県、並べ替えフィールド、ショートメッセージ部分に相当)の高さは、アコーディオンをクリックして折りたたんだり縮小したりすると、高さが変化するアニメーション効果があります。

アコーディオンの高さを計算するとき、データノード要素の高さを取得できず、アコーディオンの高さが0になり、折りたたむことができません。

理由

その子要素の物理サイズは、非表示の p 要素ノードでは取得できません。つまり、入力ボックスの下の展開された領域がまだ非表示になっている場合、アコーディオン コントロールはデータ DOM ノード要素の高さを取得できません。

解決策

JQuey の height() メソッドと width() メソッドはサイズを取得します。隠し要素の。ただし、これで取得できるのは非表示の要素の高さだけであり、内部のサブ要素の高さは取得できません。 ！ ！

解決策: JS は CSS 設定要素の非表示と表示を制御します

コードのアイデア: 非表示の要素を表示 (要素の非表示メソッドを削除、CSS 属性の表示:なし、または一部のスタイル クラス) -- -> ターゲット要素の高さを計算します ---> 非表示要素のスタイルを復元します

1. 表示と非表示を切り替えるときに要素がちらつきます ---->解決策: CSS を使用する Visibility:hidden 非表示属性では、visibility:hidden 非表示要素には物理的な寸法があります。 高さの計算が非常に短時間で完了できる場合、このちらつき現象は無視できます。

2. 要素が表示されると、物理的なサイズが占有され、他の要素の位置に影響を与える可能性があります ----> 解決策: この非表示の要素を画面外またはドキュメント フローの外に移動します (位置: 絶対)。

サンプルコードは次のとおりです:

getSize メソッドを呼び出し、隠れ要素要素と、targetEl のサイズを返すためにサイズを取得する必要があるターゲット要素を渡します。 ！ ！

//获取元素的物理尺寸，参数：element隐藏的元素节点;targetEl需要获取尺寸的目标元素
this.getSize = function(element,targetEl) {
 //增加隐藏，防止element在取消隐藏时闪烁; position: absolute;和display:none看需要是否加上
 var _addCss = { visibility: 'hidden' };
 var _oldCss = {};
 var _width;
 var _height;
 if (this.getStyle(element, "display") != "none") {
  return { width: !!targetEl ? targetEl.offsetWidth : element.offsetWidth , height: !!targetEl ? targetEl.offsetHeight : element.offsetHeight };
 }
 for (var i in _addCss) {
  _oldCss[i] = this.getStyle(element, i);
 }
 this.setStyle(element, _addCss);
 //这里是通过angularjs的ng-show指令隐藏元素的，去掉ng-hide样式类就可以取消隐藏
 var _isNgHide = element.classList.contains("ng-hide");
 _isNgHide && element.classList.remove("ng-hide");
 _width = !!targetEl ? targetEl.offsetWidth : element.offsetWidth;
 _height =!!targetEl ? targetEl.offsetHeight : element.offsetHeight;
 //还原之前的样式，class
 this.setStyle(element, _oldCss);
 _isNgHide && element.classList.add("ng-hide");
 return { width: _width, height: _height };
};

this.getStyle = function(element, styleName) {
 return element.style[styleName] ? element.style[styleName] : element.currentStyle ? element.currentStyle[styleName] : window.getComputedStyle(element, null)[styleName];
};
this.setStyle = function(element, obj){
 if (angular.isObject(obj)) {
  for (var property in obj) {
   var cssNameArr = property.split("-");
   for (var i = 1,len=cssNameArr.length; i < len; i++) {
    cssNameArr[i] = cssNameArr[i].replace(cssNameArr[i].charAt(0), cssNameArr[i].charAt(0).toUpperCase());
   }
   var cssName = cssNameArr.join("");
   element.style[cssName] = obj[property];
  }
 }
 else if (angular.isString(obj)) {
  element.style.cssText = obj;
 }
};

非表示要素の幅と高さの取得に関するその他の js 関連記事については、PHP 中国語 Web サイトに注目してください。