Question

我正在尝试从此if语句调用函数时调整<div>的大小。我知道if语句正在工作，因为当函数mTr()被调用时它起作用，我知道函数myFun()有效，但由于某种原因，函数myFun（）没有被调用。

if (window.screen.height==568) { // iPhone 4"
    document.querySelector("meta[name=viewport]").content="width=320.1";
    myFun("divId");
    mTr();

}
function myFun(id)
{
    var obj = document.getElementById(id);
    if (obj)
    {
        obj.setAttribute("style", "height:300px;");
    }
}
function mTr()
{
    alert("Hello World!");
}

Answer 1

有几个原因myFun()不会被调用：

window.screen.height并不完全是568
document.querySelector("meta[name=viewport]").content="width=320.1";生成脚本错误，导致脚本执行停止
此代码之前有一些错误导致执行停止
您的代码在加载DOM之前执行得太早，因此无法找到相关的DOM元素。

要做的第一件事是检查浏览器错误控制台并查看报告的脚本错误（如果有）。

第二件事就是在你的javascript调试器（内置于大多数浏览器中）的if语句中设置断点，然后逐步执行以下每个语句以查看发生的情况。

您还可以在代码中嵌入console.log("xxx")语句，以在控制台中创建面包屑跟踪，告诉您发生了什么。

Answer 2

我重新测试了一切。我想我找到了你的问题。您的代码中有错误。

错误在这里：

document.querySelector("meta[name=viewport]").content="width=320.1";

应该是：

document.querySelector("meta[name=viewport]").setAttribute('content', 'width=320.1');

完成Javascript：

if (window.screen.height==568) { 

   document.querySelector("meta[name=viewport]").setAttribute('content', 'width=320.1');    
   myFun("divId");
   mTr();
}

function myFun(id)
{
   var obj = document.getElementById(id);
   if (obj)
   {
       obj.setAttribute("style", "height:300px;");
   }
}

function mTr()
{
   alert("Hello World!");
}

你可以在这里测试一下： http://jsfiddle.net/KwGwd/

动态更改<div>元素</div>的大小

2 个答案: