document.write()及其输出内容的样式、位置控制

lewis 7年前 (2018-11-17) 阅读数 9 #程序编程

文章标签 document.write()

document.write() 是 JavaScript 中的一个方法，用于向文档中动态添加内容。它可以将指定的字符串作为 HTML 或文本输出到当前的文档中。

使用 document.write() 输出的内容的样式和位置是由 HTML 和 CSS 控制的，而不是由 document.write() 自身控制。

下面是一些常见的方式来控制输出内容的样式和位置：

1. 使用内联样式：

您可以在 document.write() 输出的内容中使用内联样式来设置样式，如下所示：

document.write('<pstyle="color:red;font-size:16px;">Hello,World!</p>');

上面的代码将输出一个红色、字体大小为16像素的段落元素。

2. 使用外部样式表：

您可以在文档头部引入一个外部样式表，并将样式应用于 document.write() 输出的内容。例如：

<head><linkrel="stylesheet"type="text/css"href="styles.css">
</head>
```
styles.css:
```css
.myClass{
color:blue;
font-size:20px;
}
```
JavaScript代码：
```javascript
document.write('<pclass="myClass">Hello,World!</p>');

上面的代码将输出一个蓝色、字体大小为20像素的段落元素，并且应用了 myClass 样式类。

3. 使用 DOM 操作：

您可以使用 JavaScript 的 DOM 操作方法来精确地控制 document.write() 输出内容的样式和位置。例如，您可以创建一个新的元素，并将其添加到特定的容器中，然后为该元素设置样式属性。下面是一个示例：

varnewElement=document.createElement('p');newElement.textContent='Hello,World!';
newElement.style.color='green';
newElement.style.fontSize='24px';
document.body.appendChild(newElement);

上面的代码将创建一个新的段落元素，设置其文本内容为 "Hello, World!"，并将其颜色设置为绿色，字体大小为24像素。然后，它将该元素添加到文档的 body 元素中。

请注意，使用 document.write() 来动态添加内容已经不再推荐使用，因为它会覆盖整个文档内容，并可能导致不可预料的结果。更好的做法是使用 DOM 操作方法来动态修改文档的内容。