相关疑难解决方法(0)

TypeError:document.body为null

为什么我在浏览器中出错？

TypeError:document.body为null

代码在JSfiddle中运行良好.

HTML

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jsscript.js"></script>
</head>
<body>
</body>

Run Code Online (Sandbox Code Playgroud)

var creElem = document.createElement("p");
creElem.innerHTML = "Hellow World";
creElem.setAttribute("id", "id_name");
document.body.appendChild(creElem);

Run Code Online (Sandbox Code Playgroud)

javascript typeerror

Get*_*up4

2016 01-20

9
推荐指数

1
解决办法

1万
查看次数

如何在Chrome开发工具中分析Page Speed

我正试图了解Chrome Dev工具中的Network Tab,了解页面加载的时间以及网络选项卡底部的DomContentLoaded,Load和Finished之间的区别.

从用户的角度来看,页面何时可以阅读,查看,与之交互？是DomContentLoaded,加载还是完成？

从SEO的角度来看,谷歌用来衡量网页速度的事件是什么？

DOMContent已加载

据我所知,DOMContent加载意味着WebPages HTML文档已被浏览器下载和解析,但仍可能需要下载图像,css和javascript等资源,这是正确的吗？

从访问该网页的用户现在准备好了吗？

是否阻止呈现的JavaScript和CSS延迟这个活动？

在上面的Chrome网络标签中,为什么DOMContentLoaded 1.97s位于蓝色文本的底部,但时间线中的蓝线恰好在3秒标记之前？

加载事件

我想这个事件一旦完成下载并完全渲染就会被触发,这个颜色线是什么颜色,红线是2s标记但是在网络选项卡的底部它是红色的网络2.95s! ？

这是一个好点,可以考虑页面已准备好为用户查看.如果你看看amazon.co.uk,直到大约14秒,完成时间一直到3.5分钟,我想是Ajax请求.这让我觉得当Page准备好供用户查看时,这些事件都不会真正代表.

optimization performance google-chrome

Hol*_*lly

lucky-day

9
推荐指数

1
解决办法

3970
查看次数

在NextJS React应用中未定义窗口？

在我的NextJS应用中，我似乎无法访问window

未处理的拒绝（ReferenceError）：未定义窗口

componentWillMount() {
    console.log('window.innerHeight', window.innerHeight);
}

Run Code Online (Sandbox Code Playgroud)

javascript reactjs next.js

Leo*_*ban

lucky-day

9
推荐指数

14
解决办法

1万
查看次数

使用body onload的替代方案

我是一个新手,我正在玩试图用javascript实现一些东西.

我有一个功能,我需要在我的页面加载后生效,但我不想使用<body onload="init()"是否有另一种选择？

            <script type="text/javascript">
            function init() {
            container = document.createElement('div');
            <script>

            <body onload="init()">

            </body>

Run Code Online (Sandbox Code Playgroud)

html javascript function onload

Jah*_*wey

lucky-day

5
推荐指数

2
解决办法

2930
查看次数

document.ready & window.onload 与 CSS 媒体查询

在研究用户看到内容之前运行的 CSS 和 JS 代码时，有件事一直困扰着我。CSS 媒体查询到底是什么时候运行的？哪个 js 和 jquery 函数首先运行（document.onload、document.ready 等）？当我对其进行研究时，我发现This和 This问题解释了 domcontentloaded、document.ready 和 window.onload 函数之间的区别。然而，与这些函数相比，我无法弄清楚 CSS 中的媒体查询到底何时运行。所以我通过 JSFiddle 在这里检查了它。

在HTML部分我只写了一个带有ID的div；

<div id="testDiv">
  Test Media Queries And JS Functions
</div>

Run Code Online (Sandbox Code Playgroud)

在 CSS 中，仅运行了 1 个媒体查询；

@media screen and (min-width:1px){
  #testDiv{
    color: black;
  }
}

Run Code Online (Sandbox Code Playgroud)

在JS部分，有不同的加载函数

$('document').ready(function() {
  document.getElementById("testDiv").style.color = "blue";
});

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("testDiv").style.color = "red";
});

window.onload = function() {
  document.getElementById("testDiv").style.color = "yellow";
};

Run Code Online (Sandbox Code Playgroud)

CSS 代码及其效果短暂可见。当我运行代码时，div 变成了蓝色。然而，我遇到了一个奇怪的问题。仅在 Google Chrome 新选项卡（非隐身模式）中，代码运行为黄色，这意味着 window.onload 最后运行，而在所有其他浏览器和选项卡中，div 显示为蓝色。 …

javascript css

Ahm*_*kan

lucky-day

2
推荐指数

1
解决办法

230
查看次数

如何使用Javascript制作一个5秒后才会出现的按钮？

标题几乎说明了一切：我需要帮助制作一个仅在页面加载后 5 秒出现的按钮。

这是我正在使用的代码：

                <html>
                <body onload="setTimeout(showStuff, 5000)">

                        <br><br><br><br><br><br><br><br><br><br><br><br><br>        
                        <div class=login align=center>
                        <font size=13 face=helvetica> You're doing that too much. </font><br> <br> <br>
                        <font size=5 face=helvetica>
                        You have entered the wrong username/password too many times <br>
                        <br><br>
                        <br><br>
                        Click "OK" to go back to the log-in page <br> <br>
                        <p id="Button"><input type=submit onclick="myFunction()" id="Button" value="OK"> </p>

                        <script>
                        document.getElementById("Button").style.visibility = "hidden";

                        function showStuff(Button){
                        document.getElementById("Button").style.display = "inline";}

                        function myFunction() {
                            window.location = "project.html"}


                        </script>
            </div> </font>
                </body>
            </html>

Run Code Online (Sandbox Code Playgroud)

html javascript

G_ *_*ter

2018 04-04

1
推荐指数

1
解决办法

5020
查看次数

需要动态替换 <h1> 标签内的文本。

所以我试图构建一个完全动态的日历网络应用程序，只是为了一些练习，但我正在努力动态替换这个 H1 元素文本。

我已经将所有月份都应用于创造性命名的“month”变量，并且输出正确，但我似乎无法替换我的占位符

<h1 id="replace">Month</h1>

Run Code Online (Sandbox Code Playgroud)

使用

    function title(){
    var myReplace = document.getElementById("replace");
    myReplace.innerHTML = month;
    }

Run Code Online (Sandbox Code Playgroud)

html javascript replace

作者

lucky-day

0
推荐指数

1
解决办法

368
查看次数

为什么不在单击操作上创建类选择器？

以下是HTML代码:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript">
    var list = document.querySelector('ul');
    list.addEventListener('click', function(ev) {
        if (ev.target.tagName === 'LI') {
            ev.target.classList.toggle('done');
        }
    }, false);
    </script>
</head>

<body>
    <ul>
        <li>Buy milk</li>
        <li>Take the dog for a walk</li>
        <li>Exercise</li>
        <li>Write code</li>
        <li>Play music</li>
        <li>Relax</li>
    </ul>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

下面是CSS代码:

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933; …

Run Code Online (Sandbox Code Playgroud)

html javascript css jsfiddle

ove*_*nge

2015 10-04

-1
推荐指数

1
解决办法

76
查看次数