Question

我是Web开发的初学者，所以我正在练习通过按钮编辑视频的大小。在js脚本内部，我声明了全局变量var myVideo = document.getElementById("Video1");，并尝试在诸如以下的函数中进一步使用它：

function Enlarge(){
    myVideo.width=1060;
    myVideo.height=720;
}

，但没有用。但是当我使用在每个函数中分别设置document.getElementById（“ Video1”）：

function Enlarge(){
    document.getElementById("Video1").width = 1060;
    document.getElementById("Video1").height = 720;
}

，它起作用了。我尝试使用“”引号（例如“ 1060”）以及myVideo.setAttribute（“ width”，“ 1060”）进行相同操作，但都无效。关于DOM getElementbyId的工作方式，或者关于全局变量的声明，我不知道。请，有人能说出问题是什么。任何帮助将不胜感激。

最诚挚的问候，达斯坦。

其余代码： html：

<!DOCTYPE html>
<html>

<head>
    <title>Second Page</title>
    <link rel="stylesheet" type="text/css" href="second.css"/>
</head>

<script src="second_script.js"></script>


<body>
    <h2>The second page</h2>
<div>
    <button onclick="Squeeze()">Squeeze</button>
    <button onclick="Enlarge()">Enlarge</button>
    <button onclick="Standard()">Standard</button>
    <button onclick="Hide_Show()">Hide/Show</button>
    <br><br>
    <video id="Video1" width="740" height ="480" controls>
    <source src="Media/IMG_0178.mp4.MOV" type="video/mp4">
    </video>
</div>
</body>

</html>

JS：

var myVideo = document.getElementById("Video1"); // it doesn't work

function Squeeze(){ // all of functions work without global variable myVideo
    document.getElementById("Video1").width = 320; 
    document.getElementById("Video1").height = 240;
}

function Enlarge(){
    document.getElementById("Video1").setAttribute("width", "1060");
    document.getElementById("Video1").setAttribute("height", "720");
}

function Standard(){
    document.getElementById("Video1").width = 740;
    document.getElementById("Video1").height = 480;
}

function Hide_Show(){
    if(document.getElementById("Video1").style.display=="none"){
        document.getElementById("Video1").style.display="inline";
    }
    else{
        document.getElementById("Video1").style.display="none";
    }
}

全球范围

0 个答案: