如何使用DOM通過單選按鈕更改背景大小(JAVASCRIPT)-有解無憂

我想問一下是否有替代方法。我對 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>

爪哇腳本：

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

uj5u.com熱心網友回復：

也許這會幫助你：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/368678.html

標籤：javascript html css dom

上一篇：Javascript中的eventListener('click')方法和onclick屬性之間的確切區別是什么？[復制]

下一篇：CSS-JavaScript未實作