userscript - 如何在 html textarea 元素中编辑样式

Question

<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>

我想添加 line-height: 1.0; 进入 textarea 元素样式，但我不知道这样做

(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;\"");
})();

Answer 1

有一个style属性可以实现这一点：

 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>

另外，如果你坚持直接修改内联样式，你可能想使用这个：

 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>

Answer 2

您可以使用类似以下代码的内容：

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

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