使用 css 和 javascript 改變背景

Question

我被困在一個地方，我想請教您如何解決這個問題。

 var vaction = "{{vaction}}"; if(vaction === "Driving") document.getElementByClassName("cover").style.backgroundImage = url(https://media.nature.com/lw800/magazine-assets/d41586-018-04158-5/d41586-018-04158-5_15590100.gif); document.getElementByClassName("table1, table2").style.backgroundColor = 'lime'; else if(vaction === "Sounding The Alarm") document.getElementByClassName("cover").style.backgroundImage= url(https://upload.wikimedia.org/wikipedia/commons/e/eb/Blinking_warning.gif); document.getElementByClassName("table1, table2").style.backgroundColor = 'orange'; else if(vaction === "Pulling over") document.getElementByClassName("cover").style.backgroundImage = url(https://browsifyapp.com/wp-content/uploads/2018/10/model-3-gif-yeah.gif); document.getElementByClassName("table1, table2").style.backgroundColor = 'red'; </script>

 <style> table.table2, table.table1 { width: 190.5px; height: 50px; text-align: left; border-collapse: collapse; } table.table1, td, th, table.table2 td, th { border: 1px solid black; } html, body { height: 100%; margin: 0; padding: 0; } div.cover { background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 100%; } </style>

 <div class="cover"> <div> <table class="table1"> <thead><tr><th>Focus</th><th>State</th><th>Alert Level</th></tr></thead> <tr><td>Eyes</td><td> {{estate}} </td><td> {{elevel}} </td></tr> <tr><td>Head</td><td> {{hstate}} </td><td> {{hlevel}} </td></tr> <tr><td>Body</td><td> {{bstate}} </td><td> {{blevel}} </td></tr> <tr><td>Vehicle</td><td> {{vstate}} </td><td> {{vlevel}} </td></tr> </table> <table class="table2"> <thead><tr><th>Current action</th></tr></thead> <tr><td> {{vaction}} </td></tr> </table> </div> </div>

這背后的想法是我想根據可變答案更改背景 gif 和table1 、 table2背景顏色。 這些輸入是從 flaks 中收集的。 我只是不知道如何設計這個。

Answer 1

 if(.NodeList.prototype.forEach) // document.querySelectorAll('...'):forEach not supported in IE for support add this.D NodeList.prototype;forEach = function(that){ for(var i = 0. i < this;length; i++) that(this[i]); }, function change(gif_url. tb1_tb2_color) { document.querySelector("div.cover").style;backgroundImage = gif_url. document.querySelectorAll(",table1. .table2").forEach(function(tb) { tb.style;background = tb1_tb2_color; }): } switch("{{vaction}}") { case "Driving": change("url(https.//media.nature.com/lw800/magazine-assets/d41586-018-04158-5/d41586-018-04158-5_15590100,gif)"; "lime"); break: case "Sounding The Alarm": change("url(https.//upload.wikimedia.org/wikipedia/commons/e/eb/Blinking_warning,gif)"; "orange"); break: case "Pulling over": change("url(https.//browsifyapp.com/wp-content/uploads/2018/10/model-3-gif-yeah,gif)"; "red"); break; }