画像は、それの後に同じCSSプロパティは、[OK]をJavaScriptの

に変わったのされていないので、これは現在の背景です：画像は、それの後に同じCSSプロパティは、[OK]をJavaScriptの

<style> 
html { 
    background: url('source.gif') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 100%; 
} 
</style>

そして（ボタンの上にマウスを移動するとき）私はこれでそれを変更します。

<script> 
    document.getElementById('b1').addEventListener('mouseover',() => { 
     document.body.style.backgroundImage = "url('src2.gif')"; 
     document.body.style.backgroundRepeat = "no-repeat"; 
     document.body.style.backgroundSize = "cover"; 
    }); 
</script>

しかし、問題はそれがフルスクリーンでさえないことです。前回のものと同じプロパティをCSSで使用したいと思っています。これどうやってするの？

出典

2017-12-01 petxd

''と '' 同じものではありません。あなたの問題を再現する[mcve]を提供してください。 – charlietfl

ああ、これは問題でした。それを私が直した。ありがとう！ – petxd

@petxd答えの1つを正しいとマークできますか？ – entio

あなたは<html>にスタイルを持っていますが、javascriptではボディスタイルを変更しています。あなたが最初の値に戻したい場合は、マウスがb1要素の上ではありません後

body { 
    background: url('source.gif') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 100%; 
} 

document.getElementById('b1').addEventListener('mouseover',() => { 
    document.body.style.backgroundImage = "url('src2.gif')"; 
    document.body.style.backgroundRepeat = "no-repeat"; 
    document.body.style.backgroundSize = "cover"; 
});

また、あなたはこのような何かを追加する必要があります

document.getElementById('b1').addEventListener('mouseleave',() => { 
    document.body.style.backgroundImage = "url('source.gif')"; 
    document.body.style.backgroundRepeat = "no-repeat"; 
    document.body.style.backgroundSize = "cover"; 
});

もライン

document.body.style.backgroundSize = "cover";

が冗長であるが、このプロパティはcssでalredyに設定されているためです。

よろしく、KJ

出典

2017-12-01 16:02:12

変更CSS、それはあなたが同じ要素を変更する必要があります

document.getElementById('b1').addEventListener('mouseover',() => { 
 
    document.body.style.backgroundImage = "url('https://cdn.pixabay.com/photo/2017/07/24/19/57/tiger-2535888_960_720.jpg')"; 
 
});

body, html { 
 
    height: 100%; 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
html { 
 
    background: url('https://cdn.pixabay.com/photo/2016/05/27/18/31/chaffinch-1420407_960_720.jpg') no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<button id="b1" value="b1">Other Image</button>

出典

2017-12-01 16:06:49 Joschi

をHTML、body要素にない当てはまるので、最初の、あなたがbodyのスタイルを変更しますCSS設定をhtmlに設定してください。 https://jsfiddle.net/c59eymf8/1/

JS：

document.getElementById('b1').addEventListener('mouseover', function() { 
    document.body.style.backgroundImage = "url('https://wow.olympus.eu/webfile/img/1632/x=1024/oly_testwow_stage.jpg')"; 
    document.body.style.backgroundRepeat = "no-repeat"; 
});

CSS：

はここでフィドルだ

body { 
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/384px-PM5544_with_non-PAL_signals.png') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-height: 100%; 
}

出典

2017-12-01 16:09:03 entio

画像は、それの後に同じCSSプロパティは、[OK]をJavaScriptの

答えて

関連する問題