userscript - how to edit style in html textarea element-CodePudding

<textarea data-a-target="chat-input" data-test-selector="chat-input" aria-label="Send message" class="ScInputBase-sc-1wz0osy-0 ScTextArea-sc-1ywwys8-0 kYJGMC InjectLayout-sc-588ddc-0 iZLAMf tw-textarea tw-textarea--no-resize" autocomplete="twitch-chat" maxlength="500" placeholder="Send message" rows="1" style="padding-right: 6.5rem; padding-left: 3.8rem;"></textarea>

i want to add line-height: 1.0; into textarea element style but i have no idea to do it

(function() {
    'use strict';

    var textarea = document.querySelector("textarea")
    textarea = textarea.replace("style=\"padding-right: 6.5rem; padding-left: 3.8rem;\"","style=\"padding-right: 6.5rem; padding-left: 3.8rem; line-height: 1.0;\"");
})();

CodePudding user response：

There is a style property to accomplish that:

document.querySelector("textarea").style.lineHeight = 1.0;

<textarea
      data-a-target="chat-input"
      data-test-selector="chat-input"
      aria-label="Send message"
      class="
        ScInputBase-sc-1wz0osy-0
        ScTextArea-sc-1ywwys8-0
        kYJGMC
        InjectLayout-sc-588ddc-0
        iZLAMf
        tw-textarea tw-textarea--no-resize
      "
      autocomplete="twitch-chat"
      maxlength="500"
      placeholder="Send message"
      rows="1"
      style="padding-right: 6.5rem; padding-left: 3.8rem"
    ></textarea>

Also, if you insist on modifying inline style directly, you might want to use this:

const textarea = document.querySelector("textarea");

textarea.setAttribute("style", textarea.getAttribute("style")   "; line-height: 1.0;");

<textarea data-a-target="chat-input" data-test-selector="chat-input" aria-label="Send message" class="
        ScInputBase-sc-1wz0osy-0
        ScTextArea-sc-1ywwys8-0
        kYJGMC
        InjectLayout-sc-588ddc-0
        iZLAMf
        tw-textarea tw-textarea--no-resize
      " autocomplete="twitch-chat" maxlength="500" placeholder="Send message" rows="1" style="padding-right: 6.5rem; padding-left: 3.8rem"></textarea>

CodePudding user response：

You can use something like the code bellow:

document.getElementById('myID').setAttribute('style', 'background-color: black; color: white');

<input id="myID"></input>