blocks|key|4128189|text|只需使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4128190|document.getElementsByTagName('html')[0].style.backgroundImage+=+"url('img_tree.png')";|code-block|syntax|javascript|4128191|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Simply use:</p>

<pre><code>document.getElementsByTagName('html')[0].style.backgroundImage = "url('img_tree.png')";
</code></pre>


blocks|key|4128215|text|使用jquery，您可以执行以下操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4128216|$('html').on('click',+function(){
++++$('html').css({
++++++"background":+"url('https://picsum.photos/1200/3300/?blur')+no-repeat+center+center+fixed",
++++++"background-size":+"cover"
++++});
});|code-block|syntax|javascript|4128217|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>With jquery you could do the following</p>

<pre><code>$('html').on('click', function(){
    $('html').css({
      "background": "url('https://picsum.photos/1200/3300/?blur') no-repeat center center fixed",
      "background-size": "cover"
    });
});
</code></pre>


blocks|key|4128768|text|您必须同时设置backgroundImage和backgroundSize属性。尝试以下操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4128769|​|4128770|document.querySelector('#btnSetImage').addEventListener('click',+function(){
++var+html+=+document.querySelector('html');
++html.style.backgroundImage+=+"url('https://www.noodleman.co.uk/images/source/google_merchant_bulk_category_assign/google.jpg')";
++html.style.backgroundSize+=+'cover';
});|code-block|syntax|javascript|4128771|<button+type="button"+id="btnSetImage">Set+Background+Image</button>|4128772|4128773|entityMap^0|7|F|N|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>You have to set both <code>backgroundImage</code> and <code>backgroundSize</code> property. Try the following:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('#btnSetImage').addEventListener('click', function(){
  var html = document.querySelector('html');
  html.style.backgroundImage = "url('https://www.noodleman.co.uk/images/source/google_merchant_bulk_category_assign/google.jpg')";
  html.style.backgroundSize = 'cover';
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button type="button" id="btnSetImage"&gt;Set Background Image&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4128330|text|您可以使用documentElement直接访问html元素|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4128331|​|4128332|/*Just+change+the+image+source+with+javascript*/
document.querySelector('#changeImage').addEventListener('click',+function()+{
++document.documentElement.style.backgroundImage+=+'url("https://www.fillmurray.com/400/400")';
});|code-block|syntax|javascript|4128333|/*Base+settings+in+CSS*/

html+{
++background:+url('https://www.fillmurray.com/g/400/400')+no-repeat+center+center+fixed;
++/*This+Would+be+a+greyscale+image*/
++-webkit-background-size:+cover;
++-moz-background-size:+cover;
++-o-background-size:+cover;
++background-size:+cover;
}|4128334|<div+style="color:#FFF;">Bill+Murray!</div>

<button+id="changeImage">ChangeImage</button>|4128335|4128336|entityMap^0|5|F|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p>You can access the html element directly with <code>documentElement</code>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/*Just change the image source with javascript*/
document.querySelector('#changeImage').addEventListener('click', function() {
  document.documentElement.style.backgroundImage = 'url("https://www.fillmurray.com/400/400")';
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/*Base settings in CSS*/

html {
  background: url('https://www.fillmurray.com/g/400/400') no-repeat center center fixed;
  /*This Would be a greyscale image*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="color:#FFF;"&gt;Bill Murray!&lt;/div&gt;
&lt;!-- Just Some Content --&gt;
&lt;button id="changeImage"&gt;ChangeImage&lt;/button&gt;</code></pre>
</div>
</div>
</p>


<p>i have searched google and on here but i cant exactly find a correct answer to my problem i used this code:</p>

<pre><code>html {
   background: url('../resources/imgs/bgs/mainbg.jpg') no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
</code></pre>

<p>that i got from the internet to set a background image that is always in the center and fits perfecly in the browser and it works great but i ran into a problem. i need to change the background image on a button click but i dont know how to target the html tag is it even possible? many thanks :)</p>

<p>my question was flagged as a duplicate but my problrm is not just getting the style of the html elememnt but changing it the same as the code snippet using only pure javascript</p>


changing html element background image js

我已经在谷歌上搜索过了，但我无法准确地找到我的问题的正确答案，我使用了以下代码：html {   background: url('../resources/imgs/bgs/mainbg.jpg') no-repeat center center fixed;    -webkit-background-size: ...

问更改html元素背景图像js
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改html元素背景图像jsEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改html元素背景图像js
EN