UserScript to Make Textarea Boxes Expandable-CodePudding

I regularly use a website with a lot of textarea boxes, but the stupid thing is that they aren't expandable and thus adding a lot of text to them (which I do frequently) feels quite cramped and is more difficult than I would like it to be. I would like to make a greasemonkey script/UserScript or some sort of javascript I can paste in the Chrome Console to change this part of the HTML/CSS:

resize: none

To:

resize: true

This makes the textarea box have the little gripper at the bottom and solves the problem

A few things to note are 1. this website seems to be dynamically generated from some sort of CMS and 2. I don't have the ability to change any content on this CMS. Also, I'm sure there is a better way to ask this question..

Another thing is that all I want is for the textarea to always be big enough to house all of the text, so if there is a way to automatically expand to the text, that'd be great. Also, it'd be great to have the textarea gripper on the stackoverflow new post text box!

Full example code is below where you will find 'resize: none' Many thanks!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<tr>
    <td valign="top"  align="left">
        <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tbody>
                <tr>
                    <td ></td>
                </tr>

                <tr>
                    <td  align="left" valign="top">Gotta change this text box to be permanently expandable. Ideally automatically expandable. 
                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top" width="100%" style="padding-top: 2px;">
                        <textarea
                            name="ctl00$ContentPlaceHolderPageContents$ctl00$ctl00$TextArea_CustomDocumentNoteGenerals_PersonPresent"
                            id="ctl00_ContentPlaceHolderPageContents_ctl00_ctl00_TextArea_CustomDocumentNoteGenerals_PersonPresent"
                             rows="4" style="width: 95%; resize: none;"
                            spellcheck="True" data-preventexpand="PreventExpand" tabindex="0"></textarea>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>
</body>
</html>

CodePudding user response：

Here is an example based on your post:

const textarea = document.querySelector('#ctl00_ContentPlaceHolderPageContents_ctl00_ctl00_TextArea_CustomDocumentNoteGenerals_PersonPresent');

if (textarea) {               // check if found
  textarea.style.resize = 'both';
}

Update on comment

For more than one textarea on the page

document.querySelectorAll('textarea').forEach(item => item.style.resize = 'both');