- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
好吧,我想弄清楚这个 JS 代码是如何工作的。你能给我解释一下吗?
这是代码(我复制了一些w3schools的代码,完整:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
我认为 document.documentElement 意味着它是一个 HTML 并且它包含页面上的所有元素。我错了吗?
那么为什么我们需要在topFunction()中设置两个变量呢?当我删除这一行时:
document.body.scrollTop = 0;
一切仍然有效,那么为什么我们需要这部分代码呢?谢谢。
最佳答案
从问题标题预编辑中:
What's the difference between
document.body
anddocument.documentElement
?
document.body
是 body
元素。 document.documentElement
是(在 HTML 文档中)html
元素。
So why we need two variable setting in topFunction()?
因为不幸的是,当滚动主窗口的内容时,某些浏览器历史上滚动的是html
,而其他浏览器则滚动的是body
。您可以在这里尝试您当前的浏览器:
var n, div;
for (n = 1; n <= 100; ++n) {
div = document.createElement('div');
div.innerHTML = String(n);
document.body.appendChild(div);
}
var bodyDisplay = document.getElementById("body-display");
var docElDisplay = document.getElementById("docel-display");
document.addEventListener("scroll", function() {
bodyDisplay.innerHTML = String(document.body.scrollTop);
docElDisplay.innerHTML = String(document.documentElement.scrollTop);
});
.top {
position: fixed;
height: 2em;
border-bottom: 1px solid #ddd;
background: white;
}
<div class="top">
<div>
body scrollTop:
<span id="body-display"></span>
</div>
<div>
documentElement scrollTop:
<span id="docel-display"></span>
</div>
</div>
<div>Scroll up and down</div>
关于javascript - 为什么此代码同时使用 `document.body` 和 `document.documentElement` ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49014076/
我有一个简单的 XML 文件,如下所示。 org1
我有一些代码可以从下面的 .xml 文件中读取数据。在 IE Quirks 模式下,所有数据都可以正常检索,但是在 IE9 中我收到错误: Unable to get value of the pro
var element = new DOMParser().parseFromString('', 'application/xml').documentElement; var children =
我遇到了一个 Flow 的用例,当我使用 document.documentElement 时,我需要先对其进行类型优化,因为它有可能在其内置定义中为 null . https://github.co
如果我使用 document.documentElement 会出现跨浏览器问题吗? 目标浏览器是 火狐浏览器 Internet Explorer 歌剧 Safari Android iOS 黑莓 提
private void Extract(string url) { HtmlWeb hw = new HtmlWeb(); HtmlDocument doc = hw.Load(ur
我正在尝试使用 java 脚本解析 XML 文件。根据我阅读的教程,我发现要获取根元素,我必须使用 document.documentElement。 我使用该语法,但当我尝试显示该语法的返回值时,浏
private void Extract(string url) { HtmlWeb hw = new HtmlWeb(); HtmlDocument doc = hw.Load(ur
我在 jQuery 的源代码中看到了这段代码。我是 javascript 的新手,我想知道它是如何工作的。 if ( "getBoundingClientRect" in document.docum
我有这样一个函数: jQuery(document.documentElement).on('click touch', function(e) { // check if $(e.targe
我想创建一个构造函数来创建一个 documentElement 对象。 例如,考虑 new Audio() 构造函数 - 它创建一个 documentElement 对象,如果您向它传递一些变量,它会
我正在尝试创建一个新的 xml 文件,将数据写入其中然后保存。 代码如下: XmlDocument doc= new XmlDocument(); XmlDeclaration dec = doc.C
$xml = file_get_contents(example.com); $dom = new DomDocument(); $dom->loadXML($xml); $items = $dom-
我想了解 documentElement.clientWidth和 window.innerWidth以及它们在各种设备上的行为。我用这个http://67.20.67.232/test.html要测
我最近重新打开了一个旧的(1 年)Symfony 项目,并且每个页面上都出现错误(我不记得一年前有过这个问题): [exception] 500 | Internal Server Error | S
我正在尝试在 ie11 上使用 document.documentElement.msRequestFullscreen() 进入全屏。它返回未定义。 还有 var elem = document.g
这是我的问题: xmlDoc.documentElement.appendChild(cloneNode);//here documentElement required xmlDo
当我运行此代码时,它不起作用 goruncode(){ editor = ace.edit('editor'); var editorvaluet=editor.getValue();
我尝试了一些简单的示例,如下所示: 这个显示了一个矩形,如果你点击,test() 就会被执行(见运行版本 here )。正如我在带有 Fireb
我认为“document.documentElement.cildNodes”像以前一样是标签中的所有子节点,但是今天我在进行代码练习时,我发现了一个特殊情况: javascript
我是一名优秀的程序员,十分优秀!