2

一部のアイコンが空白のタブに表示されるChrome拡張機能を作成していました。ページにアイコンを追加するためにJavaScriptを使用しています。以下はコードスニペットです。

HTML：

<div id="icons" class="icons"></div>

Javascript：

function addIcons() {
  for (var i = 0; i < iconArray.length; i++) {
    var link = document.createElement('a');
    link.href = linkArray[i];

    var icon = document.createElement('img');
    icon.src = "images/" + iconArray[i];
    icon.title = titleArray[i];

    link.appendChild(icon);
    document.getElementById('icons').appendChild(link);
  }
  document.getElementById('icons').style.borderBottom="2px solid blue";
}

問題は、境界線がアイコンの上に表示されていることです（境界線は下に表示されるはずです！）。誰かが私に望ましい結果を得るために何をすべきか教えてもらえますか？

4

2 に答える 2

1

コードを試してみたところ、正しく機能します。

スクリーンショット：https ：//skitch.com/runk/83fes 、最新のChrome。

ページの残りの部分に有効なhtmlマークアップがあることを確認しますか？問題がある可能性があります。

そして、jsを介してcssスタイルを設定しないことをお勧めします。

<div id="icons" class="icons" style="border-bottom: 2px solid blue"></div>

またはcssスタイルタグ（ファイル）を使用する

<style>
.icons { border-bottom: 2px solid blue }
</style>
于 2012-05-10T06:07:49.577 に答える
-2

DOM要素の下の境界線の設定については、http：//reference.sitepoint.com/css/border-bottomを確認してください。

于 2012-05-10T06:04:59.810 に答える