使用 jQueryUI 可调整大小时删除 DOM 中的高度答案

【问题标题】：Remove height in DOM while using jQueryUI resizable使用 jQueryUI 可调整大小时删除 DOM 中的高度
【发布时间】：2016-08-01 14:38:59
【问题描述】：

我正在使用flex 为我的网络应用程序制作响应式布局。

我在我的导航面板上使用 jQuery UI 来调整它的大小。不幸的是，当触发 resize 事件时，即使我在 resizable 设置中指定了句柄，jQuery UI 也会在 DOM 中为我的元素插入一个硬编码的高度。

这是触发调整大小事件时我在 DOM 中得到的内容：

<div class="navigator ui-resizable" style="top: 0px; left: 0px; width: 245px; height: 929px;">

我想摆脱除width之外的所有其他样式。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <style>

        html, body {
            margin: 0;
            height: 100%;
        }
        .mainWrapper_1
        {
          display: flex;
          backgound: gold;
          height:100%;
        }

        .mainWrapper_1 .navigatorManager
        {
            background: tomato;
            flex: 0 0 30px;
        }

        .mainWrapper_1 .mainWrapper_2
        {
          background: gray;  
          flex: 1;
          display: flex;
          flex-direction: column;
        }

        .topSideBar
        {
            height:50px;
            background: yellow;
        }
        .mainWrapper_3
        {
            flex: 1;
            background: cyan;
            display:flex;
        }
        .navigator
        {
            flex: 0 0 auto/*100px*/;
            background-color: green;
        }
        .mainWrapper_4
        {
            flex: 1;
            display:flex;
            flex-direction: column;
            background: red;
        }
        .tabs
        {
            height:50px;
            background: pink;
        }
        .mainWrapper_5
        {
            flex: 1;
            background: magenta;
        }

        </style>
    </head>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
    <body>
        <div class="mainWrapper_1">
          <div class="navigatorManager">side</div>
          <div class="mainWrapper_2">
            <div class="topSideBar">
              top side bar
            </div>
            <div class="mainWrapper_3">
                <div class="navigator">
                    navigator
                </div>
                <div class="mainWrapper_4">
                    <div class="tabs">
                        TABS
                    </div>
                    <div class="mainWrapper_5">
                        MAIN
                    </div>
                </div>
            </div>
          </div>
        </div>
    </body>

    <script>
        $(document).ready(function(){
            $(".navigator").resizable({handles: "e"});
        });
    </script>
</html>

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

尝试仅删除 height 属性，其他属性：top 和 left 负责定位 .navigator，并且可能对于调整大小功能的功能至关重要。要删除属性，您可以尝试removeAttr() jQuery 方法或.removeAttribute() JavaScript 方法。下面的示例使用 .removeAttr() 并已将 .removeAttribute() 注释掉。如果您更喜欢后者，只需将注释标记交换到另一行。

顺便说一句，您的代码有一些奇怪的位置，例如...

...<script> 标记被放置在结束 </body> 标记之后。
- <script> 标签应该位于<head> 之后的<link> 和<style> 标签。或者 <script> 标签可以放在结束 </body> 标签之前。
还有一个<link>标签在<head>之外。
- 虽然我认为在头部之外放置一个<link> 标记是可以的，但它应该位于尽可能最高的位置（即任何<meta> 标记下的头部。）。这是因为浏览器会按照他们一路发现的样式呈现样式，并且您希望 DOM 尽早完成。
```
 $(document).ready(function() {
     $(".navigator").resizable({
           handles: "e"
      }).removeAttr('height');
    //document.querySelector('.navigator').removeAttribute('height');
 }); 
```

现场演示：PLUNKER

片段

<!DOCTYPE html>
<html>
        <head>
        <meta charset='utf-8'>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css">
        <style>
html, body { margin: 0; height: 100%; }
.extLayer { display: flex; backgound: gold; height: 100%; }
.extLayer .navMgr { background: tomato; flex: 0 0 30px; }
.extLayer .endoLayer { background: gray; flex: 1; display: flex; flex-direction: column; }
.topSideBar { height: 50px; background: yellow; }
.intLayer { flex: 1; background: cyan; display: flex; }
.navigator { flex: 0 0 auto/*100px*/; background-color: green; }
.auxLayer { flex: 1; display: flex; flex-direction: column; background: red; }
.tabs { height: 50px; background: pink; }
.coreLayer { flex: 1; background: magenta; }
</style>
        </head>

        <body>
<div class="extLayer">
          <nav class="navMgr">side</nav>
          <div class="endoLayer">
    <header class="topSideBar"> top side bar </header>
    <div class="intLayer">
              <nav class="navigator"> navigator </nav>
              <section class="auxLayer">
        <div class="tabs"> TABS </div>
        <main class="coreLayer">
                  MAIN
                </main>
      </section>
            </div>
  </div>
        </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
        $(document).ready(function(){
            $(".navigator").resizable({handles: "e"}).removeAttr('height');
						//document.querySelector('.navigator').removeAttribute('height');
        });
    </script>
</body>
</html>

【讨论】：

我也只是通过在导航器上添加一个 css 规则来解决它。我在上面添加了height: inherit !important;。你觉得哪个更好？
如果您使用.css 和!important，如果另一个插件需要访问.navigator 上的特定样式，它可能会限制您的样式选项。 !important 应该非常谨慎地使用。如果您像演示一样删除内联样式，那么您的其他样式以及访问该样式的任何未来需求都不会受到阻碍。
它成功了，很好的破解！我发现它比 CSS 样式 hack 更好。
太棒了！顺便说一句，如果您遇到需要使用 !important 的情况，请尝试使用双类选择器。前任。而不是 .exampleClass { height: 500px !important} ，使用这个 .exampleClass.exampleClass { height: 500px;} 注意选择器重复类。通过这样做，该特定选择器具有非常高的特异性，几乎可以覆盖其他任何东西，但它不像 !important 那样最终。