如何使用 DOM 通过单选按钮更改背景大小（JAVASCRIPT）答案

【问题标题】：How to use DOM to change background-size with radio buttons (JAVASCRIPT)如何使用 DOM 通过单选按钮更改背景大小（JAVASCRIPT）
【发布时间】：2022-01-02 12:22:52
【问题描述】：

我想问一下是否有替代方法。我对javascript很陌生

我有 3 个单选按钮可以更改 DIV 的背景大小。我设法通过使用三元组来实现它，如果选中它，它会改变背景大小。 DOM。显然封面不起作用。我已经测试了多次，但只有自动和包含在检查收音机时工作。 css 中没有默认的背景大小值。似乎它的默认值是自动的，尽管在检查时 Cover 不起作用，而 Contain 起作用。谢谢 :D 这是代码。

                <div class="radiobtn">

                <input type="radio" id="bgCOVER" name="radiobtnnm" value="COVER" onclick="backgroundfunc()">
                <label for="BGcover">Background Cover</label> 

                    <input type="radio" id="bgAUTO" name="radiobtnnm" value="AUTO" onclick="backgroundfunc()">
                <label for="BGauto">Background Auto</label> 

                    <input type="radio" id="bgCONTAIN" name="radiobtnnm" value="CONTAIN" onclick="backgroundfunc()">
                <label for="BGcontain">Background Contain</label> 
            </div>

JAVASCRIPT：

function backgroundfunc() {
var coverval = document.getElementById("bgCOVER");
document.getElementById("outputjs").style.webkitBackgroundSize = coverval.checked ? "cover" : "none";

var autoval = document.getElementById("bgAUTO");
document.getElementById("outputjs").style.backgroundSize = autoval.checked ? "auto" : "auto";

var containval = document.getElementById("bgCONTAIN");
document.getElementById("outputjs").style.backgroundSize = containval.checked ? "contain" : "none";

}

我找到了解决方案 ??????????‍♂️ 我将背景大小设为默认值。所以只有2个选择，因为封面不起作用。如果在这个问题上有更好的方法，请告诉我。我会很感激的。它将帮助我获得未来项目的知识谢谢！ :D

【问题讨论】：

标签： javascript html css dom

【解决方案1】：

也许这会对你有所帮助：

var coverval = document.getElementById("BGcover");
var containval = document.getElementById("BGcontain");
var autoval = document.getElementById("BGauto");
      
function backgroundfunc(){
      document.querySelector("body").style.backgroundSize = coverval.checked ? "cover" : "none";
      
      document.querySelector("body").style.backgroundSize = autoval.checked ? "auto" : "auto";
      
      document.querySelector("body").style.backgroundSize = containval.checked ? "contain" : "none";
}

body{
background:url('https://cdn.mos.cms.futurecdn.net/ntFmJUZ8tw3ULD3tkBaAtf.jpg');
background-size:auto;
}

<html>
<head>
</head>
<body>
  <div class="radiobtn">
    <input type="radio" id="BGcover" name="radiobtnnm" value="COVER" onclick="backgroundfunc()">
    <label for="BGcover">Background Cover</label>
    <input type="radio" id="BGauto" name="radiobtnnm" value="AUTO" onclick="backgroundfunc()">
    <label for="BGauto">Background Auto</label>
    <input type="radio" id="BGcontain" name="radiobtnnm" value="CONTAIN" onclick="backgroundfunc()">
    <label for="BGcontain">Background Contain</label>
  </div>
</body>
</html>

【讨论】：