วิธีใช้ DOM ที่จะเปลี่ยนภาพพื้นหลัง-ของขนาดกับวิทยุกระดุม(จาวาสคริปต์)

Question 1

ฉันอยากจะถามถ้ามันมีทางเลือกวิธีกับเรื่องนี้ ฉันมาใหม่ที่จะต้องจาวาสคริปต์

ฉันมี 3 ปุ่มวิทยุนั่นจะเปลี่ยนพื้นหลัง-ของขนาดของ DIV. ฉันตั้งใจจะทำให้มันเป็นไปได้โดยการใช้ ternary ซึ่งมันสามารถเปลี่ยนแปลงพื้นหลังขนาดว่ามันตรวจดูแล้ว 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

Question 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>

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

บางทีนี่อาจจะช่วยคุณ:

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 ที่จะเปลี่ยนภาพพื้นหลัง-ของขนาดกับวิทยุกระดุม(จาวาสคริปต์)

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่