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 ですべて消しています。
