How to set text on a web page using JavaScript

JavaScript is a widely used web programming language. It is an essential tool for realizing important functions such as dynamic special effects and form validation on web pages. This article will discuss how to use JavaScript to set text on web pages, including setting text content, style, location, links, and special effects.

1. Set text content

The easiest way to set text content on a web page is to add text through HTML language. For example, use the

tag to add first-level heading text, use the

tag to add paragraph text, etc. But sometimes we need to set text content through JavaScript. This can be achieved through the getElementById and innerHTML properties.

1. getElementById

The getElementById method allows us to get a reference to a specified element through the element ID, and then we can use the innerHTML attribute to set the text content of the element. For example, the following code will set the text content of the element with ID "demo" to "Hello World!".

document.getElementById("demo").innerHTML = "Hello World!";

2. innerHTML

The innerHTML attribute is used to get or set the HTML content of the element. If you use this attribute to set HTML content, any HTML elements already present in this element will be replaced with the new HTML content. For example, the following code will replace the HTML content of the element with the ID "demo" with two paragraphs of text.

document.getElementById("demo").innerHTML = "<p>第一段落</p><p>第二段落</p>";

2. Set the text style

You can set the text style through JavaScript, such as font, color, size, alignment, etc. Methods for setting text styles include adding or changing CSS classes and using the style attribute.

1. Add or change CSS classes

You can add or change CSS classes in HTML documents through JavaScript to set text styles. For example, the following code will add a new CSS class to the text of the element with the ID "demo", which will set the text font color to red.

document.getElementById("demo").classList.add("red");

CSS classes are defined in CSS style sheets, for example:

.red{
  color: red;
}

2. Use the style attribute

For style changes on a single element, you can use style Attributes. This property allows us to directly change the CSS properties of the element. For example, the following code sets the font size and color for the text of the element with the ID "demo":

document.getElementById("demo").style.fontSize = "24px";
document.getElementById("demo").style.color = "blue";

3. Set the text position

We can also set the text position through JavaScript, For example, set the text to be centered vertically or horizontally. This can be achieved by changing the position attribute of the element.

1. Horizontal Centering

To center an element horizontally, you can set its left and right margins to "auto". For example, the following code will center the element with the ID "demo" horizontally.

document.getElementById("demo").style.marginLeft = "auto";
document.getElementById("demo").style.marginRight = "auto";

2. Vertical centering

To center an element vertically, you can set its top and bottom margins to "auto" and set the height of its parent element to Equal to the viewport height. For example, the following code will vertically center the element with the ID "demo".

document.getElementById("demo").style.marginTop = "auto";
document.getElementById("demo").style.marginBottom = "auto";
document.getElementById("parent").style.height = window.innerHeight + "px";

4. Set text links

In addition to static text content and styles, we can also add links and mouse events to text through JavaScript. This can be achieved by setting the href attribute of the element and adding an event listener.

1. Link

If you want to add a link to the text, you can use the href attribute of the element. For example, the following code will convert the text with the ID "demo" into a link. Clicking the link will jump to the "www.example.com" website.

document.getElementById("demo").innerHTML = "<a href=&#39;http://www.example.com&#39;>点击这里</a>";

2. Mouse events

Through the addEventListener method of the HTMLElement object or the on event handler property, we can add mouse events, such as mouse click, hover, move, etc. event. For example, the following code will cause the element with the ID "demo" to change its text color when hovering over it.

document.getElementById("demo").addEventListener("mouseover", function() {
  this.style.color = "red";
});
document.getElementById("demo").addEventListener("mouseout", function() {
  this.style.color = "black";
});

5. Special effects

In web pages, we can also use JavaScript to add special effects to text, such as pop-up windows, scrolling, flashing and other effects. This can be achieved by using JavaScript animation and effects libraries.

1. Animation

Animation effects can be achieved by using JavaScript animation libraries, such as jQuery and Animate.css. For example, the following code will move the element with the ID "demo" up and down.

$("#demo").animate({
  top: '+=50px'
}, 1000);

2. Special Effects

Special effects can be achieved by using JavaScript effects libraries, such as WOW.js and Animate.css. For example, the following code will cause the element with the ID "demo" to blink.

$("#demo").addClass("animated infinite flash");

In this article, we discussed how to use JavaScript to set text content, style, position, links, and special effects on web pages. These technologies will bring unlimited possibilities to your web design, making your web pages more vivid and attractive.

The above is the detailed content of How to set text on a web page using JavaScript. For more information, please follow other related articles on the PHP Chinese website!