如何使用 DOM 通过单选按钮更改背景大小（JAVASCRIPT）
Posted
技术标签:
【中文标题】如何使用 DOM 通过单选按钮更改背景大小（JAVASCRIPT）【英文标题】：How to use DOM to change background-size with radio buttons (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
【问题讨论】：
【参考方案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>【讨论】：
以上是关于如何使用 DOM 通过单选按钮更改背景大小（JAVASCRIPT）的主要内容，如果未能解决你的问题，请参考以下文章