如何使用DOM通过单选按钮更改背景大小(JAVASCRIPT)

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

我有3个单选按钮，可以改变DIV的背景大小。我设法通过使用三进制使其成为可能，在三进制中，如果选中它，它会改变背景大小。DOM。显然封面不起作用。我已经测试了多次，但只有当检查收音机时，自动和包含功能才能工作。css中没有默认的背景大小值。它的默认值似乎是自动的，尽管选中"覆盖"时不起作用，而"包含"则起作用。谢谢：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";

}

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

也许这会对您有所帮助：

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>

相关内容

最新更新

热门标签：