Xóa kiểu css

Question

Thuộc tính chỉ đọc

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

3 trả về kiểu nội tuyến của một phần tử ở dạng đối tượng

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

4 chứa danh sách tất cả các thuộc tính kiểu cho phần tử đó với các giá trị được gán cho các thuộc tính được xác định trong thuộc tính

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

3 nội tuyến của phần tử

Nội dung chính Show

Cài đặt kiểu
Lấy thông tin phong cách

Ghi chú. Xem Tham chiếu thuộc tính CSS để biết danh sách các thuộc tính CSS có thể truy cập qua

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

3. Thuộc tính

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

3 có cùng mức độ ưu tiên (và cao nhất) trong tầng CSS như một khai báo kiểu nội tuyến được đặt thông qua thuộc tính

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

3

Giá trị

Một đối tượng

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

4, với các thuộc tính sau

cờ tính toán

Bỏ đặt

quy tắc CSS gốc

Vô giá trị

nút sở hữu

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

0

Cài đặt kiểu

Mặc dù thuộc tính này được coi là chỉ đọc, nhưng có thể đặt kiểu nội tuyến bằng cách gán trực tiếp một chuỗi cho thuộc tính

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

3. Trong trường hợp này, chuỗi được chuyển tiếp tới

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

2. Sử dụng

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

3 theo cách này sẽ ghi đè hoàn toàn tất cả các kiểu nội tuyến trên phần tử

Do đó, để thêm các kiểu cụ thể vào một phần tử mà không làm thay đổi các giá trị kiểu khác, thông thường nên đặt các thuộc tính riêng lẻ trên đối tượng

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

4. Ví dụ,

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

5

Khai báo kiểu được đặt lại bằng cách đặt nó thành

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

6 hoặc một chuỗi trống, e. g. ,

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

7

Lấy thông tin phong cách

Thuộc tính

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

3 không hữu ích cho việc tìm hiểu đầy đủ về các kiểu được áp dụng trên phần tử, vì nó chỉ đại diện cho các khai báo CSS được đặt trong thuộc tính

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

3 nội tuyến của phần tử, chứ không phải các thuộc tính đến từ các quy tắc kiểu ở nơi khác, chẳng hạn như các quy tắc kiểu trong phần

…
fontWeight = '' > 'bold'
color = 'red' > 'rgb(255, 0, 0)'
…

0, . Để lấy giá trị của tất cả các thuộc tính CSS cho một phần tử, bạn nên sử dụng

…
fontWeight = '' > 'bold'
color = 'red' > 'rgb(255, 0, 0)'
…

1 thay thế

Đoạn mã sau minh họa sự khác biệt giữa các giá trị thu được bằng cách sử dụng thuộc tính

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

3 của phần tử và giá trị thu được bằng phương pháp

…
fontWeight = '' > 'bold'
color = 'red' > 'rgb(255, 0, 0)'
…

3

________số 8

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);

Đầu ra sẽ giống như

…
fontWeight = '' > 'bold'
color = 'red' > 'rgb(255, 0, 0)'
…

Lưu ý sự hiện diện của giá trị

…
fontWeight = '' > 'bold'
color = 'red' > 'rgb(255, 0, 0)'
…

4 cho

…
fontWeight = '' > 'bold'
color = 'red' > 'rgb(255, 0, 0)'
…

5 trong kiểu được tính toán và sự vắng mặt của nó trong thuộc tính

const element = document.getElementById("myElement");
let out = "";
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element, null);

for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out += `  ${prop} = '${elementStyle[prop]}' > '${computedStyle[prop]}'\n`;
  }
}
console.log(out);