Question

我是使用JavaScript函数的新手，我使用window对象创建了一个对象文字函数。我不确定这样的功能是否正确？我将发布代码，并链接到我的codepen，以便您可以看到该功能的实际应用。现在，要查看各种窗口和屏幕高度是什么，您必须调整浏览器宽度，并刷新页面，宽度和高度应相应调整。提前感谢您提供的任何帮助。

CODEPEN完整页面视图： http://codepen.io/mike316/full/eZKYRE/

<!doctype html>
    <html>
      <head>
         <meta charset="utf-8">
         <title>Template</title>
         <link rel="stylesheet" href="css/styles.css">
      </head>
      <body>
        <div class="wrapper">
          <h1>JavaScript Fun</h1>
          <span id="fun"></span>
          <script src="js/scripts.js"></script>
        </div>
     </body>
   </html>

使用html，CSS和JavaScript编写代码笔。 http://codepen.io/mike316/pen/eZKYRE

我的CSS：

body {
   background: grey;
}

.wrapper {
    background: teal;
    border: 2px solid black;
    border-radius: 15px;
    max-width: 60em;
    margin: 0 auto;
}

h1,
h2,
 p {
    text-align: center;
 }

我的JavaScript下面：

var info = {
     windowHeight: "<h2>Browser Window</h2><p>width:" + window.innerWidth + "</p>",
     windowWidth: "<p>height: " + window.innerHeight + "</p>,
     screenWidth: "<h2>screen</h2><p>Width:" + window.screen.width + "</p>",
     screenHeight: "<p>height: " + window.screen.height + "</p>
     screenInfo: function() {
         return this.windowHeight + this.windowWidth + this.screenWidth + this.screenHeight;
     }
};

调用我的功能

document.getElementById("fun").innerHTML = info.screenInfo();

Answer 1

这很好，但我建议进行调整。不要在这里使用对象。它不会在语义上添加任何内容，并且在页面加载时会锁定html属性，除非您再次创建该对象。你最好只使用函数和变量！

以下代码段与您的代码完全相同，只要您调整屏幕宽度时该函数就会运行，因此您无需刷新页面即可查看新值。的 codepen

function screenInfo () { var windowHeight = "<h2>Browser Window</h2><p>width:" + window.innerWidth + "</p>" var windowWidth = "<p>height: " + window.innerHeight + "</p>" var screenWidth = "<h2>screen</h2><p>Width:" + window.screen.width + "</p>" var screenHeight = "<p>height: " + window.screen.height + "</p>" return windowHeight + windowWidth + screenWidth + screenHeight; } function addHtml () { document.getElementById("fun").innerHTML = screenInfo() } window.onresize = addHtml addHtml()

使用window对象练习我的对象文字函数

1 个答案: