Div改变高度，当用户点击内容JS

Div change height when user click content JS

本文关键字：JS 用户 改变 高度 Div      更新时间：2023-09-26

我有div元素上升高度的问题。要查看该问题，您必须插入新元素"legal case box"。然后点击右上方div/左上方div。你可以输入一个字母，然后删除它(或者只是设置焦点并删除它)->你可以看到div元素的上升。我不明白为什么会这样。对不起，我的英语不好。谢谢!

我还注意到，如果没有注释innerDiv1.setAttribute("data-text", "Full Name of the Case");，它会发生

Safari浏览器出现问题 

[contentEditable=true]:empty:not(:focus):before {
    content:attr(data-text)
}
.boxed {
    margin: 5px;
    border: 2px solid black;
    max-width: calc(100% - 10px);
}
.inline {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 10px);
}
.divTable {
    display: table;
    border-collapse: separate;
    border-spacing: 5px;
}
.divRow {
    display:table-row;
}
.divCell {
    display:table-cell;
    border: 2px solid black;
}
<script>
    function insert(elem) {
        document.getElementById("mainDiv").focus();
        var sel = window.getSelection();
        var range = sel.getRangeAt(0);
        range.insertNode(elem);
    }
    function legalCaseBox() {
        var innerDiv1 = document.createElement('div');
        innerDiv1.contentEditable = 'true';
        innerDiv1.style.minWidth = '50pt';
        innerDiv1.style.minHeight = '50pt';
        innerDiv1.classList.add('divCell');
       //innerDiv1.setAttribute("data-text", "Full Name of the Case");
        var innerDiv2 = document.createElement('div');
        innerDiv2.contentEditable = 'true';
        innerDiv2.style.minWidth = '50pt';
        innerDiv2.style.minHeight = '50pt';
        innerDiv2.classList.add('divCell');
        innerDiv2.setAttribute("data-text", "Year");
        var firstDiv = document.createElement('div');
        firstDiv.contentEditable = 'false';
        firstDiv.classList.add('divTable');
        var rowDiv = document.createElement('div');
        rowDiv.classList.add('divRow');
        rowDiv.appendChild(innerDiv1);
        rowDiv.appendChild(innerDiv2);
        firstDiv.appendChild(rowDiv);
        var secondDiv = document.createElement('div');
        secondDiv.style.minWidth = '150pt';
        secondDiv.style.minHeight = '80pt';
        secondDiv.contentEditable = 'true';
        secondDiv.classList.add('boxed');
        secondDiv.setAttribute("data-text", "Case summary");
        var div = document.createElement('div');
        div.contentEditable = 'false';
        div.classList.add('inline');
        div.classList.add('boxed');
        div.appendChild(firstDiv);
        div.appendChild(secondDiv);
        insert(div);
    }
</script>
<body id="main" spellcheck="false">
    <button onclick="legalCaseBox()">legalCaseBox</button>
    <div id="mainDiv" contenteditable="true"></div>
</body>

http://jsfiddle.net/Lfysfz6k/3/

观察第一个div是空的，所以它的高度较小，yeardiv的高度大于第一个div，所以当点击第一个div时，它不会被最小化，因为你的年份div有一些最小的高度，因为文本。当你点击yeardiv时，第一个div是空的，高度较小，所以在你输入一些东西之前，你的yeardiv是最小化的。

如果你不想取消上面的注释行，然后尝试添加height到每个div

相关文章：