为什么javascript不会取代innerHTML的屏幕分辨率检查

Why won't javascript replace innerHTML on screen resolution check?

本文关键字：屏幕 分辨率 检查 innerHTML 取代 javascript 为什么      更新时间：2023-09-26

我正在尝试让我的网站检查屏幕分辨率并用纯文本链接替换已安装的字体图标（使用 @webfont），以便网站更适合移动设备。 我正在使用Opera移动模拟器来检查它是否有效。 我使用的用户界面显然以480x320的分辨率返回（在页面的最左上角），但.innerHTML javascript并没有启动。 有什么帮助吗？

    <!DOCTYPE html>
<html>
<head>
<title>Harry's Bar</title>
    <meta name="keywords" content="Harry's, bar, st. petersburg, florida, kenneth city, drink specials" />
    <meta name="description" content="Harry's Bar in St. Petersburg, Florida.  Drink specials every night!" />
    <meta name="author" content="Internet Solutions of Florida" />
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
</head>
<body>
<script type="text/javascript">
var width=screen.width;
var height=screen.height;
document.write(width+'x'+height);
if (width<700)
    {document.getElementById("homelink").innerHTML="Home";}
</script>
<div class="frame">
<div class="header">
<img class="logo" src="img/logo.png" alt="Harry's Bar" />
    <div class="menu">
        <ul>
        <li><a id="homelink" href="index.html" title="home">&#xf015</a></li>
        <li><a id="drinklink" href="drinks.html" title="drink menu">&#xf0fc</a></li>
        <li><a id="piclink" href="images.html" title="picture gallery">&#xf030</a></li>
        <li><a id="directionslink" href="directions.html" title="directions">&#xf0d1</a></li>
        <li><a id="contactlink" href="contact.html" title="contact us">&#xf075</a></li>
        </ul>
    </div>
</div>

该 JavaScript 在加载 HTML 之前执行。因此，当javascript触发时，没有ID为"homelink"的元素。

此外，通过使用 document.write，您可以有效地覆盖原始 HTML，因此标签无论如何都不会加载。

摆脱 document.write 调用并将脚本放在您的结束正文标签之前，它应该按预期工作。

  1. 不需要 document.write（）。如果你想诊断，你可以使用document.title或创建一个div和divid.innerHTML

  2. 确保在 <700 区域进行测试

  3. 添加一个 DOM 就绪的触发。

  4. 把它放在末尾

然后事情应该可以:)

相关文章：