小白教程
所有教程
关于
Search
172.70.100.205
172.70.100.205
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Prop doc body”的源代码
本页内容
上一节:
Prop_doc_baseuri
下一节:
Met_doc_close
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:document.body}}[[Category:dom obj document|6]] = HTML DOM body 属性 = [[dom obj document|Document 对象]] 修改当前文档的背景颜色: <sample title="" desc="" lang="html" hererun="1"> document.body.style.backgroundColor = "yellow"; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <p>点击按钮修改当前文档的背景颜色。</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { document.body.style.backgroundColor = "yellow"; } </script> </body> </html> </run> == 定义与用法 == body 属性用于设置或返回文档体。 '''如果是返回''', 该属性返回当前文档的 '''<body>''' 元素。 '''如果是设置''', 该属性会覆盖所有在 <body> 元素中的子元素, 并用新的内容来替换它。 '''提示:''' 与 [[prop document documentelement|document.documentElement]] 属性不同的是, document.body 属性返回 <body> 元素, document.documentElement 属性返回 <html> 元素。 == 浏览器支持 == {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | body | Yes | Yes | Yes | Yes | Yes |} == 语法 == 返回 body 属性: <pre> document.body </pre> 设置 body 属性: <pre> document.body = newContent </pre> == 属性 == {| class="table table-striped table-hover" ! 值 ! 描述 |- | newContent | 指定 <body> 的新内容 |} == 技术细节 == {| class="table table-striped table-hover" | DOM 版本: | Core Level 1 Document Object |- | 返回值: | Body 对象的引用,表示 <body> 元素 |} == 更多实例 == 获取当前文档的 HTML 你内容: <sample title="" desc="" lang="html" hererun="1"> var x = document.body.innerHTML; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <p>点击按钮显示文档的 HTML 的内容。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> <script> function myFunction() { var x = document.body.innerHTML; document.getElementById("demo").innerHTML = x; } </script> </body> </html> </run> 修改当前文档的 HTML 内容: <sample title="" desc="" lang="html" hererun="1"> document.body.innerHTML = "新的内容..."; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <p>点击按钮修改文档的 HTML 的内容。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> <script> function myFunction() { document.body.innerHTML = "新的内容..."; } </script> </body> </html> </run> 创建 <p> 元素,并将其添加在文档中: <sample title="" desc="" lang="html" hererun="1"> var x = document.createElement("P"); // 创建 <p> 元素 var t = document.createTextNode("这是新增的段落。"); // 创建文本节点 x.appendChild(t); // 文本添加到 <p> 元素中 document.body.appendChild(x); // 将 <p> 添加到 <body> 中 </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <p>点击按钮创建 p 元素及其内容,并将其添加在文档中。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> <script> function myFunction() { var x = document.createElement("P"); var t = document.createTextNode("这是新增的段落。"); x.appendChild(t); document.body.appendChild(x); } </script> </body> </html> </run> == 相关页面 == HTML 参考手册: [[tag body|HTML <body> 标签]] JavaScript 参考手册: [[dom obj body|HTML DOM Body 对象]] [[dom obj document|Document 对象]]
返回至“
Prop doc body
”。
上一节:
Prop_doc_baseuri
下一节:
Met_doc_close