elem.focus() でフォーカスできない要素でも
クリックしたら枠線をつけたい
ここでは div 要素に枠線を付けてみます
コード.gs
function doGet() { return HtmlService.createHtmlOutputFromFile("index"); } |
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html> <html> <head> <style> .highlight { border: solid 5px lime; } </style> </head> <body> <div id='main_div'> <div id='dvi1'>div1</div> <div id='div2'>div2</div> <div id='div3'>div3</div> </div> <script> function elem(id) { return document.getElementById(id); } function removeClassList(parentId, tagName, className) { var child = elem(parentId).getElementsByTagName(tagName); for(var i = 0; i < child.length; i++) { elem(child[i].id).classList.remove(className); } } elem('main_div').onclick = addClassList; function addClassList(e){ removeClassList('main_div', 'div', 'highlight'); var target = e.target; elem(target.id).classList.add('highlight'); } </script> </body> </html> |
補足
枠線を付けるときに、既存の枠線を消さないと枠線が残り続けるので、removeClassList ですべて消しています。