Javascript 文本区域或文本输入don'；t大小正确，但在其他方面发生了变化后，他们会这样做_Javascript_Html_Css_Textarea_Sizing

Javascript 文本区域或文本输入don'；t大小正确，但在其他方面发生了变化后，他们会这样做

javascript html css

Javascript 文本区域或文本输入don'；t大小正确，但在其他方面发生了变化后，他们会这样做,javascript,html,css,textarea,sizing,Javascript,Html,Css,Textarea,Sizing,我正在尝试创建一个浏览器扩展，我让它在页面上动态创建一个面板 panel.js部分 function createFunctionality() { var body = document.getElementsByTagName('body')[0]; var sidePanel = createSidePanel(body); createLabel(createDivContainer(sidePanel, 'panelContainer'), 'Text');

我正在尝试创建一个浏览器扩展，我让它在页面上动态创建一个面板

panel.js部分

function createFunctionality() {
    var body = document.getElementsByTagName('body')[0];
    var sidePanel = createSidePanel(body);
    createLabel(createDivContainer(sidePanel, 'panelContainer'), 'Text');
    createTextArea(createDivContainer(sidePanel, 'panelContainer'));
    createButton(createDivContainer(sidePanel, 'panelContainer'), 'Apply');
    
    createPanelOpeningButton(body);
}

function createLabel(parent, text = '') {
    var panelLabel = document.createElement('label');
    panelLabel.id = 'panelLabel';
    panelLabel.innerHTML = text;
    parent.appendChild(panelLabel);
    return panelLabel;
}

function createTextArea(parent, text = '') {
    var textArea = document.createElement('textArea');
    textArea.innerHTML = 'button';
    textArea.id = 'panelTextArea';
    parent.appendChild(textArea);
    return textArea;
}

function createButton(parent, text = '') {
    var panelButton = document.createElement('button');
    panelButton.id = 'panelButton';
    panelButton.innerHTML = text;
    parent.appendChild(panelButton);
    return panelButton;
}

function createDivContainer(parent, className) {
    var divContainer = document.createElement('div');
    divContainer.className = className;
    parent.appendChild(divContainer);
    return divContainer;
}

function createSidePanel(parent) {
    var sidenav = document.createElement('div');
    sidenav.id = 'sidePanel';
    parent.appendChild(sidenav);
    return sidenav;
}

var state;
function createPanelOpeningButton(parent) {
    var button = document.createElement('button');
    button.innerHTML = '<';
    button.id='panelOpenButton';
    state = false;
    button.addEventListener('click', function() {
        if (state) {
            closeNav();
        } else {
            openNav();
        }
        state = !state;
    });
    parent.appendChild(button);
}

但有一个问题是textarea的大小不像所有元素

我尝试在html文件中使用此代码执行相同的操作（不在此处打开脚本）：


正文
申请

然后它就可以正常工作了

但这只发生在至少textarea和文本类型的输入上，因为我试图更改按钮上的textarea，并且两个结果的大小都是我想要的，这里有什么问题

#panelOpenButton{
    position: fixed;
    top: 50%;
    right: 0%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    text-align: left;
    height: 50px;
    width: 20px;
    transition: 0.5s;
}

#panelOpenButton:hover {
    background: #63d476;
}

.panelContainer {
    position: relative;
    padding-right: 7px;
    padding-left: 7px;
    padding-top: 5px;
    padding-bottom: 0;
}
    
#sidePanel {
    position: fixed;
    z-index: 1000;
    height: 100%;
    width: 250px;
    top: 0;
    right: -250px;
    
    background-color: #63d476;
    overflow-x: hidden;
    transition: 0.5s;
}

#panelLabel {
    position: relative;
    text-align: center;
}
    
#panelTextArea {
    all: none; /*without it also the same*/
    position: relative;
    width: 100%;
}

#panelButton {
    position: relative;
    width: 100%;
}

<html>
    <head>
        <link rel="stylesheet" href="panel.css">
    </head>
    <body style="overflow:scroll;">
        <button id="panelOpenButton">&lt;</button>
        <div id="sidePanel">
            <div class="panelContainer"><label id="panelLabel">Text</label></div>
            <div class="panelContainer"><textArea id="panelTextArea"></textArea></div>
            <div class="panelContainer"><button id="panelButton">Apply</button></div>
        </div>
    </body>
</html>