Question

我正在使用vue js。我想使用纯JavaScript根据另一个div高度设置一个div。我面临的问题是我无法使用纯Java脚本设置高度。但我可以使用jquery进行设置。谁能帮我把这个jquery改成javascript吗？我正在使用的代码已给出

 Vue.nextTick(function () {
            var offsetHeight = document.getElementById('filterSection').offsetHeight;
            $(".searchResultSection").css("max-height",`calc(100% - ${offsetHeight}px)`);
           });

我需要将jquery部分更改为Java脚本。

Answer 1

不确定此更改的上下文，但我将尝试根据最佳实践为您提供一些解决方案：

如果父元素的高度固定，则height: 100%的孩子将采用父高度。

.parent { 高度：200px； }

.child { 高度：100％; }
使用vue伪指令进行DOM操作：https://vuejs.org/v2/guide/custom-directive.html
在要获得高度的元素上使用v-bind：style =“ height：calc(100% - ${offsetHeight}px)\”！

Answer 2

实际上，computed properties（https://vuejs.org/v2/guide/computed.html#Computed-Properties）是解决您的问题的理想选择：

声明一个计算属性，该属性将返回filterSectionHeight

export default {
  name: "App",

  computed: {
    filterSectionHeight() {
      const filterSectionDOM = document.getElementById("filterSection");
      return filterSectionDOM ? filterSectionDOM.offsetHeight : 0;   
    },
  }
};

在组件（或App组件）中定义div filterSection和searchResultsSection ，请不要忘记添加:style属性< / strong>谁处理模板中提供给max-height的动态.searchResultsSection

<div id="filterSection"></div> <div class="searchResultsSection" :style="{ 'max-height': `calc(100% - ${filterSectionHeight}px)` }"> </div>

在CSS中将每个div的高度设置为100％

#app { height: 600px; width: 100%; } #filterSection { height: 100%; background: rebeccapurple; //https://en.wikipedia.org/wiki/Eric_A._Meyer } .searchResultsSection{ height: 100%; background: rebeccapurple; opacity: 0.6; }

您将在此处找到完整的演示> https://codesandbox.io/s/1rkmwo1wq

Answer 3

您需要使用javascript DOM样式来执行此操作。试试这个。

temp = ans[:]
print(temp is ans) # False

在Vue JS中设置div的高度

3 个答案: