おい、これにはあまりにも多くの問題があり、どこから始めればいいのかわからない。
<img src="./img/cross.png"height="25px" width="25px" style="float: right;
vertical-align: top"' + 'onclick="alert('+1+');">';
- 属性の間にはスペースを入れる必要があります。これが厳密な HTML 仕様の一部であるかどうかはわかりませんが、読みやすさに役立つことは確かです。
<img src="..." height="...">
- タグの幅と高さ
<img>
は整数属性であり、CSS ではありません。そう<img width="25" height="25">
- 相対パスは現在のディレクトリからのパスと見なされるため、ドットで始まるパスは不要です。まさに
src="img/cross.png"
あなたが望むものです。
- 2 つのリテラル文字列を連結するのはなぜですか? 行の長さが手に負えなくなるのを防ぐことが理にかなっている場合もありますが、あなたの場合、引用がわかりづらく、エスケープがさらに難しくなります。
- その
onclick
部分は、内部に二重引用符が含まれる単一引用符で囲まれた文字列ですが、これは問題ありませんが、文字列は最初の単一引用符で終了します。そのため、onclick="alert(
後に+1
which が文字列にキャストされonclick="alert(1
、最終的な文字列が追加されます (閉じ括弧、セミコロン、二重引用符、右山括弧)。驚くべきことに、これは構文的に有効な JavaScript のようです。
つまり、alert
バックスラッシュを使用して、ステートメント内の単一引用符をエスケープします。