How to focus an element

Question

In CSS it would be something like this:

div {
    display: none;
}
div:active {
    display: block;
}

And some user action would give focus to this div by javascript

I know I can do adding and removing a class/attribute but I want to do without it

unsuccessfully:

document.getElementByTagName('div')[0].focus();

document.activeElement = document.getElementByTagName('div')[0];

Answer 1

I think you’re mixing the pseudo-classes :active with :focus. The first occurs when you click and hold the click on the element; the second is when you receive Focus - these are different behaviors.

In this case you should use:

div:focus {
   display: block;
}

But that too would not work because it is not possible to give Focus to a hidden element.

Generally those that can receive Focus are form elements (inputs, selects etc.); divcan receive if you have the attribute tabindex, as shown in the example below:

document.querySelector("div").focus();

div {
   opacity: .2;
}
div:focus {
   opacity: 1;
}

Clique fora do texto para tirar o focus da div:
<br>
<div tabindex="1">texto</div>

In conclusion, his intention is not possible to realize, mainly with hidden elements.

Edit at author’s request

Since you can’t give the hidden element Focus, you can put opacity: 0 and position: absolute. So the element will be transparent and will not take up space in the layout:

document.querySelector("div").focus();

div {
   opacity: 0;
   position: absolute;
}
div:focus {
   opacity: 1;
   position: static;
}

Clique fora do texto para tirar o focus:
<br>
<div tabindex="1">texto</div> Texto texto