1

DOM を使用して、テキストと画像を含むボタンを作成したいと考えています。私のコードでは、ボタンでテキストと画像を取得できます。しかし、問題は、ボタンの画像が上部に表示され、画像の後のテキストが同じ行に表示されないことです。

phone_btn.appendChild(picture)
phone_btn.appendChild( document.createTextNode(text) );

このコードのようなCSSも使用していますが、画像は表示されませんでした

    phone_btn.backgroundImage= 'url(http:...)';
    phone_btn.backgroundRepeat='no-repeat';
    phone_btn.paddingLef='30px';
    phone_btn.appendChild( document.createTextNode(text) );

画像と文字を一致させるにはどうすればよいですか?

4

1 に答える 1

1

これは純粋に CSS の問題のように思え、javascript とは何の関係もありません。最初に CSS コードを独自に取得し、その要素を動的に作成または変更する必要がある場合は、後で行うことをお勧めします。

<a class="button">Text</a>

.button {
     padding: 0 10px;
     background-image: url(bg.jpg);
     display: block;
     height: 30px;
     line-height: 30px;
     text-align: center
}

表示ブロックと組み合わせて、高さと行の高さを等しく設定すると、テキストが垂直方向に中央揃えになります。この高さは、背景画像の高さに等しくなければなりません。

于 2012-07-24T13:31:30.353 に答える