Comment utiliser DOM pour changer de fond de taille avec des boutons radio (JAVASCRIPT)

Question 1

Je veux vous demander si il existe une approche alternative à cela. Je suis très nouveau à javascript

J'ai 3 boutons radio qui va changer l'arrière-plan de la taille d'un DIV. J'ai réussi à la rendre possible en utilisant ternaire dans lequel il les modifications de fond taille si son cochée. DOM. Apparemment, le Couvercle ne fonctionne pas. J'ai testé plusieurs fois, mais seulement de l'automobile et de contenir des œuvres lorsque la radio est coché. Il n'y a pas d'arrière-plan par défaut valeur de taille dans le css. Il semble que sa valeur par défaut est auto, bien que la Couverture ne fonctionne pas lorsqu'elle est cochée, alors que Contiennent ne. Merci :D Voici les codes.

                <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";

}

J'ai trouvé une solution

css dom html javascript

2021-11-24 03:54:54

Question 2

Peut-être que ce sera Vous Aider à:

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>

Shivam Sharma · Answer 1 · 2021-11-25T08:41:22

Peut-être que ce sera Vous Aider à:

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>

Comment utiliser DOM pour changer de fond de taille avec des boutons radio (JAVASCRIPT)

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie