Home >Web Front-end >Front-end Q&A >How javascript calls css

How javascript calls css

PHPzOriginal: 2023-05-16 09:39:071024browse

In web design and development, JavaScript and CSS are used together to achieve a variety of stunning visual effects and interactive features. How JavaScript calls CSS is a common question, which will be described in detail below.

1. Inline style

Inline style can be directly applied to the style attribute of the HTML tag, as shown below:

<p style="color: red; font-size: 16px;">这是一个红色的段落</p>

In JavaScript, you can change the element by style attribute to modify the inline style. For example:

let p = document.querySelector("p");
p.style.color = "blue";
p.style.fontSize = "20px";

This will turn the red paragraph above into a blue paragraph with a font size of 20px.

2. External style sheets

An external style sheet is a method of placing a collection of CSS rules in a separate file. By associating the file with an HTML document, the same one can be reused Style rules. In JavaScript, a style sheet can be modified by changing the href attribute of the element in the document that is linked to the style sheet. For example:

<link rel="stylesheet" href="styles.css">

let link = document.querySelector("link");
link.href = "new-styles.css";

This changes the stylesheet in the document that is linked to styles.css to a stylesheet that is linked to new-styles.css.

3. Internal style sheet

The internal style sheet is a method of placing a collection of CSS rules between the head or body tags of an HTML document. In JavaScript, internal style sheets can be modified by directly modifying the document's style attribute. For example:

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
   }
  </style>
</head>

<body>
  <p>这是一个红色的段落</p>
</body>

let style = document.querySelector("style");
style.innerHTML = "p { color: blue; font-size: 20px; }";

This will turn the red paragraph above into a blue paragraph with a font size of 20px.

4. Class name

The class name is a name that defines the style rules of certain elements. In JavaScript, one or more classes can be added or removed by modifying the classList attribute of an element. For example:

<style>
  .red {
    color: red;
  }
  .large {
    font-size: 20px;
  }
</style>

<p class="red">这是一个红色的段落</p>

let p = document.querySelector("p");
p.classList.add("large");
p.classList.remove("red");

This will turn the red paragraph above into a paragraph with a font size of 20px.

Summary:

JavaScript can use a variety of methods to call CSS, including inline styles, external style sheets, internal style sheets, and class names. These methods can directly operate the Document Object Model (DOM) through JavaScript to achieve visual effects and interactive functions. Mastering these skills can help you better manage and control the style and behavior of Web pages.

The above is the detailed content of How javascript calls css. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html 对象 dom href 样式表

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How does javascript call the c interfaceNext article：How does javascript call the c interface

See more

How javascript calls css

Related articles