Как установить ввод: стиль фокуса программно с использованием JavaScript

Question

Я создаю библиотеку пользовательского интерфейса в JS, которая может, не полагаясь на любые таблицы стилей CSS, создавать компоненты пользовательского интерфейса, стилизованные из кода. До сих пор это было довольно просто, за исключением стилизации различных состояний управления (например, ввода: фокус один).

код, который я использую для создания поля ввода:

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

Стилизация его состояние по умолчанию легко. Однако я не уверен, как установить стиль для таких состояний, как сфокусированный, отключенный или не редактируемый.

Если у меня будут таблицы стилей CSS, включенные в проект, которые будут легко отсортированы. Однако я не могу включить какие-либо файлы CSS, это должен быть чистый JS.

Кто-нибудь знает, как установить стиль для состояния входного поля (например, вход: фокус) прямо из кода JS?

Нет JQuery пожалуйста :-) Просто прямо JS.

Заранее благодарен!

Answer 1

Вам нужно будет добавить прослушиватель событий к элементу, чтобы изменить его стиль. Вот очень простой пример.

var input = document.getElementById("something"); 
 
input.addEventListener("focus", function() { 
 
    this.style.backgroundColor = "red"; 
 
});

<input type="text" id="something" />

Answer 2

Другой альтернативой было бы построить таблицу стилей для страницы.

Что-то вроде этого:

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

Таким образом, вы будете иметь четкое разделение стилей CSS от сценариев и так лучшего обслуживания.