button タグ以外は反映される
知らなかったのでメモ。amp-script で <button> の属性の変更が HTML に反映されない話です。
例えば、こんなボタンを作り…。
<button id="sample-button" type="button">classを変更</button>
クリックする度に、<button> の class に changed
の追加と削除を繰り返すとします。
const button = document.getElementById('sample-button');
button.addEventListener('click', function() {
this.classList.toggle('changed');
});
そして、changed
を使い、CSS を書くとします。
.changed {
background: pink;
}
これらをしたのが下のボタンです。クリックする度に背景色が変わるはずですが変わりません。
理由は、クリックしても HTML 上では class が変化しないため。ただ、コンソールに Element.attributes
で取得した <button> の属性の一覧を出力していますが、そちらでは class の追加と削除ができています。
もし、<div> でボタンを作ると…。
<div id="sample-button" tabindex="0" role="button">classを変更</div>
こちらはクリックする度に背景色が変わります。
<div> などは属性の変更が HTML に反映されますが、<button> は属性の変更が HTML に反映されませんでした。他に element.setAttribute()
なども試しましたが、<button> の HTML は変化しませんでした。
そのため、<button> での aria-*
の変更は注意すべきかもしれません。私が初めて気が付いたのは、aria-expanded
の変更が HTML に反映されなかった時です。また、変更した属性を使い CSS を指定する時も注意が必要だと思います。
ただ、変更されないのは HTML 上の属性です。属性自体は変更できており、かつ変更した属性は取得し使えます。
例えば、このような HTML を書き…。
<button id="sample-button" type="button">テキストを変更</button>
<p id="sample-text">ボタンの現在の class は?</p>
このように書いてみます。
const button = document.getElementById('sample-button');
const text = document.getElementById('sample-text');
button.addEventListener('click', function() {
this.classList.toggle('changed');
const buttonClass = this.className === '' ? '空' : this.className;
text.textContent = 'ボタンの現在の class は ' + buttonClass + ' です。';
});
そうすれば、クリックする度に変わる <button> の class を element.className
で取得し、テキストに反映できます。
ボタンの現在の class は?
尚、amp-script は、WorkerDOM の仕様に沿う必要があります。WorkerDOM で使用できる DOM API は、WorkerDOM compatibility で確認できます。HTMLButtonElement.disabled
や HTMLButtonElement.value
など <button> を操作するプロパティも使えます。
また、amp-bind であれば、<button> の属性の変更を HTML に反映できます。
おまけ
WorkerDOM compatibility の現在の一覧では、HTMLElement.style
は使用不可になっています。
ですが、使えました。このような HTML があって…。
<div id="sample-box" style="background: aquamarine;">
<button id="sample-button" type="button">色を変更</button>
</div>
このように書いてみます。
const box = document.getElementById('sample-box');
const button = document.getElementById('sample-button');
button.addEventListener('click', () => {
box.style.background = 'pink';
});
すると、ボタンのクリックでボックスの背景色がピンクになります。
エラーは確認できないため、使っても問題なさそうです。