styleでイメージを表示したり、色を変えたりしたい場合、


下記の2つのコードはうまくいくのですが
e.target.style.backgroundImage = "url('a.jpg')"; 
button.style.backgroundColor = "#0000ff";

こちらだとうまくいきません。

e.target.style="list-style-image: url('a.jpg')";
このような使い方は間違っていますか?
バックグラウンドにa.jpgをリピートではなく、中央表示させたいときは
どすればいいのでしょうか?
あと、表示させた画像のサイズ変更と、透明化度(薄く表示させたい)を変更するやり方を教えていただけないでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/08/31 21:03:24
  • 終了:2015/09/07 21:05:05
id:kajironpu

ありがとうございます。
e.target.style.backgroundImage = "url('a.jpg')"; 
この部分に、背景画像を出したいのですが、↑の場合、背景がリピートしてしまいます。
中央に出すには
どうしたらいいのでしょうか?

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4593ベストアンサー獲得回数19322015/09/01 12:22:40

こちらだとうまくいきません。

e.target.style="list-style-image: url('a.jpg')";
このような使い方は間違っていますか?

list-style-image は background-image のタイプミスだとして、以下のような書き方はできません。

e.target.style="background-image: url('a.jpg')";

CSS で

#id {
    background-image: url(a.jpg);
}

に相当することを javascript でやるのは、以下のようになります。

    e.target.style.backgroundImage = "url(a.jpg)";

背景を設定するには、background-image や background-color のようにひとつひとつ設定する以外に、background というまとめて設定できるショートハンドがあります。
画像、背景色に合わせて、リピートなし、中央表示、サイズ指定を指定するには、以下のように書けます。

    e.target.style.background = "url(a.jpg) #0000ff center/16px no-repeat";

中央表示の center と、サイズ指定の 16px をスラッシュでつなげているの大事です(ぼくも知らんかった)。
これは、以下のようにひとつひとつ設定したのと同じです。

    e.target.style.backgroundImage = "url(a.jpg)";
    e.target.style.backgroundColor = "#0000ff";
    e.target.style.backgroundPosition = "center";
    e.target.style.backgroundSize = "16px";
    e.target.style.backgroundRepeat = "no-repeat";

透明度の指定は background 系のスタイルではないので、別に指定してあげる必要があります。

    e.target.style.background = "url(a.jpg) #0000ff center/16px no-repeat";
    e.target.style.opacity = 0.2;   // 透明度の指定


この辺りはリファレンスを調べると分かります。

id:kajironpu

詳細のご説明ありがとうございます。
無事成功です。
e.target.style.background = "url(sozai/c.gif) #FFBEDA center/150px no-repeat"; //ここで、間違いの絵を出す

2015/09/02 17:19:42

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4593ベストアンサー獲得回数19322015/09/01 12:22:40ここでベストアンサー

こちらだとうまくいきません。

e.target.style="list-style-image: url('a.jpg')";
このような使い方は間違っていますか?

list-style-image は background-image のタイプミスだとして、以下のような書き方はできません。

e.target.style="background-image: url('a.jpg')";

CSS で

#id {
    background-image: url(a.jpg);
}

に相当することを javascript でやるのは、以下のようになります。

    e.target.style.backgroundImage = "url(a.jpg)";

背景を設定するには、background-image や background-color のようにひとつひとつ設定する以外に、background というまとめて設定できるショートハンドがあります。
画像、背景色に合わせて、リピートなし、中央表示、サイズ指定を指定するには、以下のように書けます。

    e.target.style.background = "url(a.jpg) #0000ff center/16px no-repeat";

中央表示の center と、サイズ指定の 16px をスラッシュでつなげているの大事です(ぼくも知らんかった)。
これは、以下のようにひとつひとつ設定したのと同じです。

    e.target.style.backgroundImage = "url(a.jpg)";
    e.target.style.backgroundColor = "#0000ff";
    e.target.style.backgroundPosition = "center";
    e.target.style.backgroundSize = "16px";
    e.target.style.backgroundRepeat = "no-repeat";

透明度の指定は background 系のスタイルではないので、別に指定してあげる必要があります。

    e.target.style.background = "url(a.jpg) #0000ff center/16px no-repeat";
    e.target.style.opacity = 0.2;   // 透明度の指定


この辺りはリファレンスを調べると分かります。

id:kajironpu

詳細のご説明ありがとうございます。
無事成功です。
e.target.style.background = "url(sozai/c.gif) #FFBEDA center/150px no-repeat"; //ここで、間違いの絵を出す

2015/09/02 17:19:42
  • id:psne
    >list-style-image
    こちらは
    ・リスト1
    ・リスト2
    というような「・」を画像にするためのものですが、どの部分に画像を適用させたいのでしょうか。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません