如何使用 JavaScript 以编程方式设置输入：焦点样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27751409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set input:focus style programatically using JavaScript
提问by Sinisa
I'm building a UI library in JS that can, without relying on any CSS stylesheets, create UI components, stylised from code. So far, it's been quite easy, with exception of styling different control states (such as input:focus one).
我正在用 JS 构建一个 UI 库，它可以在不依赖任何 CSS 样式表的情况下创建 UI 组件，从代码中进行风格化。到目前为止，除了为不同的控件状态设置样式（例如 input:focus one）之外，这已经很容易了。
Code that I use to create input field:
我用来创建输入字段的代码：
function newInput()
{
var ctr = docmuent.createElement("input");
ctr.setAttribute("type","text");
ctr.setAttribute("value", some-default-value);
ctr.style.fontFamily = "sans-serif,helvetica,verdana";
/* some font setup here, like color, bold etc... */
ctr.style.width = "256px";
ctr.style.height = "32px";
return ctr;
}
Styling it for default state is easy. However I am unsure how to set style for states such as focused, disabled or not-editable.
为默认状态设置样式很容易。但是，我不确定如何为聚焦、禁用或不可编辑等状态设置样式。
If I'd be having CSS stylesheets included in the project that would be easily sorted out. However I can't have any CSS files included, it must be pure JS.
如果我将 CSS 样式表包含在项目中，那将很容易整理出来。但是我不能包含任何 CSS 文件，它必须是纯 JS。
Does anyone know how to set style for an input field state (eg. input:focus) straight from JS code?
有谁知道如何直接从 JS 代码中为输入字段状态（例如 input:focus）设置样式？
No JQueryplease :-) Just straight-up JS.
请不要使用 JQuery:-) 直接使用 JS。
Thanks in advance!
提前致谢！
采纳答案by Carl Markham
You would need to add an event listener to the element in order to change the style of it. Here is a very basic example.
您需要向元素添加一个事件侦听器才能更改它的样式。这是一个非常基本的例子。
var input = document.getElementById("something");
input.addEventListener("focus", function () {
this.style.backgroundColor = "red";
});<input type="text" id="something" />回答by Karthik
Other alternative would be to build a stylesheet for the page.
其他替代方法是为页面构建样式表。
Something like this:
像这样的东西：
var styles='input:focus {background-color:red}';
var styleTag=document.createElement('style');
if (styleTag.styleSheet)
styleTag.styleSheet.cssText=styles;
else
styleTag.appendChild(document.createTextNode(styles));
document.getElementsByTagName('head')[0].appendChild(styleTag);
This way you will have clean separation of css styles from the scripts and so the better maintenance.
通过这种方式，您可以将 css 样式与脚本完全分离，从而更好地维护。
回答by JulienRioux
At first, create your input:
首先，创建您的输入：
<input type="text" id="myElementID" />
Then add the javascript the following javascript:
然后在 javascript 中添加以下 javascript：
const element = document.getElementById("myElementID");
// Add a box shadow on focus
element.addEventListener("focus", (e) => {
e.target.style.boxShadow = "0 0 0 3px #006bff40";
});
// Remove the box shadow when the user doesn't focus anymore
element.addEventListener("blur", (e) => {
e.target.style.boxShadow = "";
});
