를 사용하는 방법 DOM 배경을 변경하려면 크기와 라디오 버튼(JAVASCRIPT)

0

질문

내가 원하는 요청이 있는 경우에는 다른 방법이다. 나는 아주 새로운 자바스크립트

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>

자바스크립트:

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

}


내가 찾 솔루션

css dom html javascript
2021-11-24 03:54:54
1

최고의 응답

2

어쩌면 이것은 당신을 도울 것입니다:

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>

2021-11-25 08:41:22

다른 언어로

이 페이지는 다른 언어로되어 있습니다

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................