JavaScript có thể sửa đổi CSS không?

CSS Object Model (CSSOM), một phần của DOM, hiển thị các giao diện cụ thể cho phép thao tác một lượng lớn thông tin liên quan đến CSS. Ban đầu được xác định trong đề xuất Kiểu DOM Cấp 2, các giao diện này hiện tạo thành một đặc tả, Mô hình Đối tượng CSS (CSSOM) nhằm mục đích thay thế nó

Trong nhiều trường hợp và nếu có thể, cách tốt nhất là thao tác linh hoạt các lớp thông qua thuộc tính

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
3 vì giao diện cuối cùng của tất cả các hook kiểu dáng có thể được kiểm soát trong một biểu định kiểu duy nhất. Mã JavaScript của một người cũng trở nên rõ ràng hơn vì thay vì dành riêng cho các chi tiết về kiểu dáng, nó có thể tập trung vào ngữ nghĩa tổng thể của từng phần mà nó đang tạo hoặc thao tác, để lại các chi tiết về kiểu dáng chính xác cho biểu định kiểu dáng. Tuy nhiên, có những trường hợp mà việc thu thập hoặc thao tác các quy tắc thực sự có thể hữu ích (dù là cho toàn bộ bảng định kiểu hay các phần tử riêng lẻ) và điều đó được mô tả chi tiết hơn bên dưới. Cũng lưu ý rằng, như với các kiểu DOM của từng thành phần riêng lẻ, khi nói về thao tác với biểu định kiểu, đây không thực sự là thao tác với (các) tài liệu vật lý, mà chỉ là biểu diễn bên trong của tài liệu

Đối tượng cơ bản

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
4 hiển thị các giao diện
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
5 và
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
6. Các giao diện đó chứa các thành viên như
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
7,
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
8 và
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
0 để truy cập và thao tác với các quy tắc kiểu riêng lẻ tạo nên biểu định kiểu CSS

Để truy cập các đối tượng

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
4 từ
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
2, bạn có thể sử dụng thuộc tính
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
3 và truy cập các đối tượng riêng lẻ theo chỉ mục (e. g. ,
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
4 là biểu định kiểu đầu tiên được xác định cho tài liệu, v.v. )

Sửa đổi quy tắc biểu định kiểu bằng CSSOM

Trong ví dụ này, nền của trang được đặt thành màu đỏ bằng CSS. Sau đó, JavaScript truy cập thuộc tính bằng CSSOM và thay đổi nền thành màu xanh lam

<html lang="en">
  <head>
    <title>Modifying a stylesheet rule with CSSOMtitle>
    <style>
      body {
        background-color: red;
      }
    style>
    <script>
      const stylesheet = document.styleSheets[0];
      stylesheet.cssRules[0].style.backgroundColor = "aqua";
    script>
  head>
  <body>
    The stylesheet declaration for the body's background color is modified via
    JavaScript.
  body>
html>

Kết quả

Danh sách các thuộc tính có sẵn trong DOM từ thuộc tính

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
4 được cung cấp trên trang Danh sách thuộc tính DOM CSS

Để sửa đổi kiểu thành tài liệu bằng cú pháp CSS, người ta có thể chèn quy tắc hoặc chèn thẻ

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
6 có thuộc tính
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
7 được đặt thành CSS mong muốn

Sửa đổi phong cách của một phần tử

Thuộc tính phần tử

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
4 (xem thêm phần "Đối tượng kiểu DOM" bên dưới) cũng có thể được sử dụng để lấy và đặt kiểu cho một phần tử. Tuy nhiên, thuộc tính này chỉ trả về các thuộc tính kiểu đã được đặt nội tuyến (e. g. ,
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
9 trả về chuỗi "
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Exampletitle>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    script>
  head>

  <body>
    <div id="d" class="thunder">Thunderdiv>
    <button onclick="setStyle()">Click here to change text colorbutton>
    <button onclick="resetStyle()">Reset text colorbutton>
  body>
html>
0" hoặc trực tiếp cho phần tử đó bằng cách sử dụng
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Exampletitle>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    script>
  head>

  <body>
    <div id="d" class="thunder">Thunderdiv>
    <button onclick="setStyle()">Click here to change text colorbutton>
    <button onclick="resetStyle()">Reset text colorbutton>
  body>
html>
1, mặc dù có thể có các kiểu khác trên phần tử từ biểu định kiểu)

Ngoài ra, khi bạn đặt thuộc tính này trên một phần tử, bạn sẽ ghi đè bất kỳ kiểu nào đã được đặt ở nơi khác cho thuộc tính cụ thể của phần tử đó mà bạn đang đặt. Ví dụ: đặt thuộc tính

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Exampletitle>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    script>
  head>

  <body>
    <div id="d" class="thunder">Thunderdiv>
    <button onclick="setStyle()">Click here to change text colorbutton>
    <button onclick="resetStyle()">Reset text colorbutton>
  body>
html>
2 sẽ ghi đè cài đặt được thực hiện ở nơi khác cho thuộc tính
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Exampletitle>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    script>
  head>

  <body>
    <div id="d" class="thunder">Thunderdiv>
    <button onclick="setStyle()">Click here to change text colorbutton>
    <button onclick="resetStyle()">Reset text colorbutton>
  body>
html>
2 của phần tử đó trong phần đầu hoặc biểu định kiểu bên ngoài. Tuy nhiên, điều này sẽ không ảnh hưởng đến bất kỳ khai báo thuộc tính nào khác cho các kiểu của phần tử đó, chẳng hạn như phần đệm hoặc lề hoặc phông chữ chẳng hạn

Để thay đổi kiểu của một phần tử cụ thể, bạn có thể điều chỉnh ví dụ sau cho (các) phần tử bạn muốn tạo kiểu

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>

Phương thức

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Exampletitle>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    script>
  head>

  <body>
    <div id="d" class="thunder">Thunderdiv>
    <button onclick="setStyle()">Click here to change text colorbutton>
    <button onclick="resetStyle()">Reset text colorbutton>
  body>
html>
4 trên đối tượng
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Exampletitle>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    script>
  head>

  <body>
    <div id="d" class="thunder">Thunderdiv>
    <button onclick="setStyle()">Click here to change text colorbutton>
    <button onclick="resetStyle()">Reset text colorbutton>
  body>
html>
5 trả về tất cả các kiểu đã thực sự được tính toán cho một phần tử

Đối tượng kiểu DOM

Đối tượng

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
4 đại diện cho một tuyên bố phong cách cá nhân. Đối tượng kiểu được truy cập từ
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
2 hoặc từ các phần tử mà kiểu đó được áp dụng. Nó đại diện cho các kiểu nội tuyến trên một phần tử cụ thể

Đặt thuộc tính kiểu

Quan trọng hơn hai thuộc tính được lưu ý ở đây là việc sử dụng đối tượng

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
4 để đặt các thuộc tính kiểu riêng lẻ trên một phần tử

________số 8

Phương tiện và loại của phong cách có thể được cung cấp hoặc không

Sử dụng phương thức setAttribute

Lưu ý rằng bạn cũng có thể thay đổi kiểu của một phần tử bằng cách tham chiếu đến phần tử đó rồi sử dụng phương thức

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Exampletitle>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    script>
  head>

  <body>
    <div id="d" class="thunder">Thunderdiv>
    <button onclick="setStyle()">Click here to change text colorbutton>
    <button onclick="resetStyle()">Reset text colorbutton>
  body>
html>
9 của phần tử đó để chỉ định thuộc tính CSS và giá trị của phần tử đó

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
8

Tuy nhiên, hãy lưu ý rằng

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Exampletitle>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    script>
  head>

  <body>
    <div id="d" class="thunder">Thunderdiv>
    <button onclick="setStyle()">Click here to change text colorbutton>
    <button onclick="resetStyle()">Reset text colorbutton>
  body>
html>
9 loại bỏ tất cả các thuộc tính
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
4 khác có thể đã được xác định trong đối tượng
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
4 của phần tử. Nếu phần tử
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
83 ở trên có thuộc tính
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
4 trong dòng là
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style exampletitle>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    style>
  head>

  <body>
    
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    p>

    
    <button onclick="resetStyle('p1');">Reset background colorbutton>
  body>
html>
85, thì giá trị đó sẽ bị xóa bằng cách sử dụng
DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Exampletitle>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    script>
  head>

  <body>
    <div id="d" class="thunder">Thunderdiv>
    <button onclick="setStyle()">Click here to change text colorbutton>
    <button onclick="resetStyle()">Reset text colorbutton>
  body>
html>
9

JavaScript có thể chỉnh sửa CSS không?

JavaScript có thể thay đổi các kiểu Css như màu sắc, cỡ chữ, v.v. của các phần tử sử dụng một số phương thức như getElementById(), getElementByClassName(), v.v. . Trong ví dụ sau, kiểu phông chữ và kích thước phông chữ của các phần tử đã thay đổi bằng cách sử dụng phương thức getElementById().

JavaScript có thể thay đổi nội dung CSS không?

nếu ý bạn là, bạn có thể sửa đổi các quy tắc css của một lớp css nhất định bằng cách sử dụng javascript/jQuery không, thì bạn không thể làm như vậy . tuy nhiên, bạn có thể sử dụng jQuery. css để tự động thêm các quy tắc CSS mới.

JavaScript có CSS ​​không?

JavaScript chỉ được áp dụng trên HTML . Có nhiều phạm vi hơn để Tối ưu hóa trong trường hợp CSS. JavaScript không hỗ trợ các loại tối ưu hóa này vì nó không có quyền truy cập vào các API đó. Các tệp CSS được lưu với.