document.body.innerHTML如何居中

时间: 2023-10-13 14:06:37 浏览: 122

document属性和方法.txt

### Document属性和方法详解 #### 一、Document对象概述 `Document`对象是浏览器中一个非常重要的对象，它表示整个HTML文档。通过`Document`对象，开发者可以访问页面中的所有元素，实现对网页内容的动态操作。下面将详细介绍`Document`的一些常用属性和方法。 #### 二、Document的基本属性 ##### 1. `document.title` 用于获取或设置HTML文档的标题，即`<title>`标签内的文本。 - **语法**： ```javascript document.title ``` - **示例**： ```javascript // 获取文档标题 var title = document.title; console.log(title); // 输出文档标题 // 设置文档标题 document.title = "新标题"; ``` ##### 2. `document.bgColor` 用于设置或返回文档的背景颜色。 - **语法**： ```javascript document.bgColor ``` - **示例**： ```javascript // 设置背景颜色 document.bgColor = "#FF0000"; // 红色 ``` ##### 3. `document.fgColor` 用于设置或返回文档的前景颜色（通常指文字的颜色）。 - **语法**： ```javascript document.fgColor ``` - **示例**： ```javascript // 设置文字颜色 document.fgColor = "#0000FF"; // 蓝色 ``` ##### 4. `document.linkColor` 用于设置或返回文档中未访问过的链接的颜色。 - **语法**： ```javascript document.linkColor ``` - **示例**： ```javascript // 设置链接颜色 document.linkColor = "#00FF00"; // 绿色 ``` ##### 5. `document.alinkColor` 用于设置或返回文档中活动链接的颜色（即鼠标悬停时链接的颜色）。 - **语法**： ```javascript document.alinkColor ``` - **示例**： ```javascript // 设置活动链接颜色 document.alinkColor = "#FF00FF"; // 紫色 ``` ##### 6. `document.vlinkColor` 用于设置或返回文档中已访问过的链接的颜色。 - **语法**： ```javascript document.vlinkColor ``` - **示例**： ```javascript // 设置已访问链接颜色 document.vlinkColor = "#00FFFF"; // 青色 ``` ##### 7. `document.URL` 返回当前文档的URL。 - **语法**： ```javascript document.URL ``` - **示例**： ```javascript // 获取文档URL var url = document.URL; console.log(url); ``` ##### 8. `document.fileCreatedDate` 返回文档创建日期的时间戳（只读）。 - **语法**： ```javascript document.fileCreatedDate ``` - **示例**： ```javascript // 获取文档创建时间 var createdDate = document.fileCreatedDate; console.log(createdDate); ``` ##### 9. `document.fileModifiedDate` 返回文档最后修改日期的时间戳（只读）。 - **语法**： ```javascript document.fileModifiedDate ``` - **示例**： ```javascript // 获取文档最后修改时间 var modifiedDate = document.fileModifiedDate; console.log(modifiedDate); ``` ##### 10. `document.charset` 返回文档的字符集编码。 - **语法**： ```javascript document.charset ``` - **示例**： ```javascript // 获取文档字符集 var charset = document.charset; console.log(charset); ``` ##### 11. `document.fileSize` 返回文档的大小（只读）。 - **语法**： ```javascript document.fileSize ``` - **示例**： ```javascript // 获取文档大小 var fileSize = document.fileSize; console.log(fileSize); ``` ##### 12. `document.cookie` 用于获取或设置文档的cookie。 - **语法**： ```javascript document.cookie ``` - **示例**： ```javascript // 设置cookie document.cookie = "username=John Doe; expires=Fri, 31 Dec 2022 23:59:59 GMT"; // 获取cookie var cookies = document.cookie; console.log(cookies); ``` #### 三、Document的方法 ##### 1. `document.write()` 用于在文档流中写入HTML元素或文本。 - **语法**： ```javascript document.write(content) ``` - **示例**： ```javascript // 在文档中写入内容 document.write("<h1>Hello World!</h1>"); ``` ##### 2. `document.createElement(Tag)` 用于创建一个新的HTML元素。 - **语法**： ```javascript document.createElement(Tag) ``` - **示例**： ```javascript // 创建一个段落元素 var p = document.createElement("p"); ``` ##### 3. `document.getElementById(ID)` 用于获取指定ID的元素。 - **语法**： ```javascript document.getElementById(ID) ``` - **示例**： ```javascript // 获取id为"myDiv"的元素 var div = document.getElementById("myDiv"); ``` ##### 4. `document.getElementsByName(Name)` 用于获取具有指定名称的所有元素。 - **语法**： ```javascript document.getElementsByName(Name) ``` - **示例**： ```javascript // 获取name为"example"的所有元素 var elements = document.getElementsByName("example"); ``` ##### 5. `document.body.appendChild(oTag)` 用于向文档的body元素添加新的子元素。 - **语法**： ```javascript document.body.appendChild(oTag) ``` - **示例**： ```javascript // 向body添加一个新的段落 var p = document.createElement("p"); p.innerHTML = "This is a new paragraph."; document.body.appendChild(p); ``` ##### 6. `document.body`属性这些属性用于获取或设置body元素的属性。 - **语法**： ```javascript document.body.[属性名] ``` - **示例**： ```javascript // 获取body的背景颜色 var bgColor = document.body.bgColor; // 设置body的文字颜色 document.body.text = "#FF00FF"; // 粉色 ``` ##### 7. `document.body.innerText` 用于获取或设置body元素的文本内容。 - **语法**： ```javascript document.body.innerText ``` - **示例**： ```javascript // 获取body的文本内容 var textContent = document.body.innerText; console.log(textContent); // 设置body的文本内容 document.body.innerText = "这是一个新文本。"; ``` ##### 8. `document.body.innerHTML` 用于获取或设置body元素的HTML内容。 - **语法**： ```javascript document.body.innerHTML ``` - **示例**： ```javascript // 获取body的HTML内容 var htmlContent = document.body.innerHTML; console.log(htmlContent); // 设置body的HTML内容 document.body.innerHTML = "<h1>这是一个新标题。</h1>"; ``` ##### 9. `document.body.onclick` 用于设置当用户点击body元素时触发的事件处理函数。 - **语法**： ```javascript document.body.onclick = func() ``` - **示例**： ```javascript // 设置点击事件处理函数 document.body.onclick = function() { alert("Body was clicked!"); }; ``` ##### 10. `document.body.onmouseover` 用于设置当用户的鼠标移动到body元素上时触发的事件处理函数。 - **语法**： ```javascript document.body.onmouseover = func() ``` - **示例**： ```javascript // 设置鼠标悬停事件处理函数 document.body.onmouseover = function() { console.log("Mouse over body."); }; ``` ##### 11. `document.body.onmouseout` 用于设置当用户的鼠标离开body元素时触发的事件处理函数。 - **语法**： ```javascript document.body.onmouseout = func() ``` - **示例**： ```javascript // 设置鼠标移出事件处理函数 document.body.onmouseout = function() { console.log("Mouse out of body."); }; ``` ##### 12. `location`对象 `location`对象提供有关当前URL的信息，并允许您改变当前URL。 - **语法**： ```javascript location.[属性名] ``` - **示例**： ```javascript // 获取当前页面的URL var url = document.location.href; console.log(url); // 重定向到新页面 document.location.href = "http://www.example.com"; ``` ##### 13. `document.selection` 用于获取文档中选定的内容。 - **语法**： ```javascript document.selection ``` - **示例**： ```javascript // 清除文档中选定的内容 document.selection.empty(); ``` ##### 14. `document.images` 用于获取文档中的所有图片元素。 - **语法**： ```javascript document.images ``` - **示例**： ```javascript // 获取文档中的第一个图片元素 var firstImage = document.images[0]; ``` 以上介绍了`Document`对象的一些基本属性和方法，开发者可以根据需要选择合适的属性和方法来实现对网页内容的动态控制。这些功能在开发交互式网页时非常有用。

您可以将此样式应用于对应元素： ``` display: flex; align-items: center; justify-content: center; ``` 其中，`align-items: center;`将元素在垂直方向上居中，`justify-content: center;`则将元素在水平方向上居中。

阅读全文

document.body.innerHTML如何居中

相关推荐

深入解析JavaScript document对象及其属性与body子对象

深入理解JavaScript的document对象

document.body.innerhtml

webBrowser1.Document.Body.InnerHtml 不包含head标签

document.body.innerHTML. contents()

document.body.innerHTML不执行脚本

document.body

document.body.appendchild

document.write和innerhtml的区别

最新推荐

基于springboot大学生就业信息管理系统源码数据库文档.zip

全国江河水系图层shp文件包下载

管理建模和仿真的文件

Keras模型压缩与优化：减小模型尺寸与提升推理速度

MTK 6229 BB芯片在手机中有哪些核心功能，OTG支持、Wi-Fi支持和RTC晶振是如何实现的？

点云二值化测试数据集的详细解读

"互动学习：行动中的多样性与论文攻读经历"

Keras正则化技术应用：L1_L2与Dropout的深入理解

在Python中使用xarray和cfgrib库处理GRIB数据时，如何有效解决遇到的DatasetBuildError错误？

JDiskCat：跨平台开源磁盘目录工具