カテゴリー: 開発

投稿日:

img要素の消せない枠線

リンクにもなっていないような単純なimg要素において、表示されるグレーの枠線は非常にやっかいです。このグレーの枠線を、ここでは仮に、空img枠線と呼びます。この空img枠線は、画像の指定がされておらず、サイズがゼロではないimg要素に現れます。

HTML要素の枠線の候補としては、内から外の順にborder、outline、box-shadowがありますが、これらと同時に表示することが出来るため、空img枠線はこれらのどれでもないことがわかります。

Windows 10のGoogle Chrome、Microsoft Edge、Mozilla Firefoxなどで表示され、細いグレーという外見も共通で、特定のブラウザのみの現象ではないようです。表示位置は特に複雑で、ChromeやEdgeではborderのさらに内側、すなわち最も内側に表示され、Firefoxでは、borderとoutlineの間に表示されます。

ブラウザ共通の空img枠線の消し方は、無理矢理ながら存在しています。現時点では、純粋な消し方を見つけられていません。もっとも簡単なのは、画像が指定されていないときimg要素のサイズをゼロにすることです。border、outline、box-shadowはimg要素サイズをゼロにしても消えないのですが、空img枠線は消えます。Firefoxではoutlineとborderの間、すなわち最も内側ではない位置に空img枠線は存在するのすが、この方法は有効です。1ドットのような極小サイズで表示されるわけでもないようです。

また、画像がないにもかかわらず、img要素のサイズがゼロでは困るということは、ただの静的ページの部品ではないでしょう。JavaScriptなどのプログラムによって画像を特定の位置に表示するための部品と思われます。それなら、img要素にこだわる必要はなく、サイズを指定したdiv要素が使用可能です。divobjにimg要素が代入されているなら、以下のようなJavaScriptコードにより、divobjの背景として画像を表示することが出来ます。

divobj.style.backgroundImage = url("<画像ファイルURL>");
投稿日:

JavaScriptの文字列処理でundefinedが入り込む

JavaScriptは、C言語などとは異なり、変数を宣言するだけでは、思うように動作しない場合があります。

var str;
str = str + '123';
alert(str);

のようなコードを動作させると、ダイアログボックスには「undefined123」と表示されます。一見、きちんと変数を宣言しているように見えますし、ダイアログボックスの内容も変数str自体が存在しないかのような「undefined123」となっています。以下のように初期値を与えればundefinedは発生しません。

var str = '';
str = str + '123';
alert(str);

ダイアログボックスが「null123」なら、初期値の問題だと想像しやすいのですが、この場合は「undefined」となっています。