집중된 <tr>s 를 강조하려고합니다 .
나는의 tabIndex를 추가 한 -1그들 각각을, 그 전화 확인 some_tr.focus()세트 document.activeElement것과을 some_tr. 그러나 어떤 이유로 CSS 규칙에 some_tr의해 강조 표시되지 않습니다 tr:focus.
나 (파이어 폭스 54)를 들어, 클릭, 주목해야한다 <tr>수동하는 수행 이 강조하는 원인.
document.getElementById("that_tr").focus();
console.log(document.activeElement);tr:focus {
background:lightblue;
}<table>
<tr>
<th>part</th>
<th>peice</th>
<th>thing</th>
<th>stuff</th>
</tr>
<tr tabindex="-1">
<td><span>data1</span></td>
<td><span>data1</span></td>
<td><span>data1</span></td>
<td><span>data1</span></td>
</tr>
<tr id="that_tr" tabindex="-1">
<td><span>data2</span></td>
<td><span>data2</span></td>
<td><span>data2</span></td>
<td><span>data2</span></td>
</tr>
</table>that_tr위의 스 니펫에서 강조 표시 되지 않는 이유는 무엇 입니까? 이 작업을 수행하려면 어떻게해야합니까?
이유는 모르겠지만 이벤트 리스너에서 실행할 때 내 코드가 저 (리눅스의 Firefox)에서 작동한다는 것을 알았습니다. 이것은 브라우저의 특징이며 버그 일 수 있습니다.
document.addEventListener('keydown', function(e) {
document.getElementById("that_tr").focus();
console.log(document.activeElement);
});tr:focus {
background:lightblue;
}<table>
<tr>
<th>part</th>
<th>peice</th>
<th>thing</th>
<th>stuff</th>
</tr>
<tr tabindex="-1">
<td><span>data1</span></td>
<td><span>data1</span></td>
<td><span>data1</span></td>
<td><span>data1</span></td>
</tr>
<tr id="that_tr" tabindex="-1">
<td><span>data2</span></td>
<td><span>data2</span></td>
<td><span>data2</span></td>
<td><span>data2</span></td>
</tr>
</table>어쨌든 이벤트 리스너 내에서 이것을 실행하려고했기 때문에 이것은 나에게 충분합니다. 즉, (있는 경우)이 행동의 이유를 배우는 데 신경 쓰지 않을 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다