通过单击按钮调整带有 iframe 的容器的大小

Question

标题中的问题差不多。这是我拥有的：

JS

    function zoomvid() {
    document.getElementsById('containervid').height="337.5px"; 
    document.getElementsById('containervid').width="500px";
}

function unzoomvid() {
    document.getElementsById('containervid').height="202.5px"; 
    document.getElementsById('containervid').width="300px";
}

function resetsize() {
    document.getElementsById('containervid').height="270px"; 
    document.getElementsById('containervid').width="400px";
}

[编辑] 我试过这样做。 0 效果。

function resizing() {
var plus = document.getElementById("zoom");
var moins = document.getElementById("unzoom");
var normal = document.getElementById("reset");

var objet = document.getElementById("containervid");

if(plus) {
    objet.style.height = "337.5px";
    objet.style.width = "500px";
}

if(moins) {
    objet.style.height = "202.5px";
    objet.style.width = "300px";
}

if(normal) {
        objet.style.height = "270px";
        objet.style.width = "400px";
    }
};

当然，在执行此操作时，我将 onclick="resizing()" 放在所有按钮上。

CSS

.containervid {
    position: absolute;
    top: 120px;
    width: 400px;
    height: 270px;
    background-color: black;
}

#iframevid {
    position: absolute;
    align-self: baseline;
    padding-bottom: 0;
    width: inherit;
    height: 230px;
    overflow: hidden;
}

.containervid > button {
    border-radius: 15px;
    background-color: white;
    font-family: monospace;
    font-weight: 700;
    position: absolute;
    bottom: 11px;
    outline: none;
    border-style: none;
    color: rgb(29, 29, 29);
}

HTML

<div class="containervid" id="containervid">
            <iframe id="iframevid" 
             frameborder="0" 
             type="text/html" 
             src="https://www.dailymotion.com/embed/video/x3p85xq" allowfullscreen > 
            </iframe>
            <button id="zoom" onclick="zoomvid()">+</button> 
            <button id="unzoom" onclick="unzoomvid()">-</button> 
            <button id="reset" onclick="resetsize()">reset</button> 
        </div>

我知道我的 js 是错误的，因为 1.dev 控制台在 inspect element 2 上说了它。我真的非常讨厌 js。有什么帮助吗？ Unzoom 应该是，好吧，缩小和缩放相反的大小，而 resetsize，好吧... 重置大小。

Answer 1

您可以使用 JQuery;

$('button').click(function() {
var plus = document.getElementById("zoom");
var moins = document.getElementById("unzoom");
var normal = document.getElementById("reset");

var objet = document.getElementById("containervid");

if(this==plus) {
    objet.style.height = "337.5px";
    objet.style.width = "500px";
}

if(this==moins) {
    objet.style.height = "202.5px";
    objet.style.width = "300px";
}

if(this==normal) {
        objet.style.height = "270px";
        objet.style.width = "400px";
    }
});

或者你也可以像这样用JS做；

function zoomvid() {
document.getElementById('containervid').style.height="337.5px"; 
document.getElementById('containervid').style.width="500px";
}

function unzoomvid() { 
document.getElementById('containervid').style.height="202.5px"; 
document.getElementById('containervid').style.width="300px";
}

function resetsize() {
document.getElementById('containervid').style.height="270px"; 
document.getElementById('containervid').style.width="400px";
}

在你的第一个代码部分，你写了 getElementsById。这应该是 getElementById 并添加 ().style.height

第二个代码部分，如果你想知道点击了哪个按钮，那么更好的方法是使用 JQuery。

这是JS version

这是JQuery

Answer 2

document.getElementsByID('containervid').height = "337.5px"; 有拼写错误。它被称为 getElementById。作为 ID 的单个元素必须是唯一的，不能有多个。这也使它成为错误的选择器，因为您使用的是类而不是 ID。你需要使用 querySelector('.containervid')。那么下一个错误是，你错过了你的选择器和高度之间的 .style 。所以应该是：

document.querySelector('.containervid').style.height = "337.5px";

每一行都出现同样的错误。

function zoomvid() {
  document.querySelector('.containervid').style.height = "337.5px";
  document.querySelector('.containervid').style.width = "500px";
}

function unzoomvid() {
  document.querySelector('.containervid').style.height = "202.5px";
  document.querySelector('.containervid').style.width = "300px";
}

function resetsize() {
  document.querySelector('.containervid').style.height = "270px";
  document.querySelector('.containervid').style.width = "400px";
}

.containervid {
  position: absolute;
  top: 120px;
  width: 400px;
  height: 270px;
  background-color: black;
}

#iframevid {
  position: absolute;
  align-self: baseline;
  padding-bottom: 0;
  width: inherit;
  height: 230px;
  overflow: hidden;
}

.containervid>button {
  border-radius: 15px;
  background-color: white;
  font-family: monospace;
  font-weight: 700;
  position: absolute;
  bottom: 11px;
  outline: none;
  border-style: none;
  color: rgb(29, 29, 29);
}

<div class="containervid" id="containervid">
  <iframe id="iframevid" frameborder="0" type="text/html" src="https://www.dailymotion.com/embed/video/x3p85xq" allowfullscreen> 
            </iframe>
  <button id="zoom" onclick="zoomvid()">+</button>
  <button id="unzoom" onclick="unzoomvid()">-</button>
  <button id="reset" onclick="resetsize()">reset</button>
</div>

通过单击按钮调整带有 iframe 的容器的大小

Resizing a container with an iframe by clicking a button

html

javascript

css

resize

onclick