html - Thay đổi thuộc tính style của phần tử một cách động bằng JavaScript

Tôi có một bảng kiểu cụ thể cho một div. Bây giờ tôi muốn thay đổi một thuộc tính của div một cách động bằng js.

Làm thế nào tôi có thể làm điều đó?

document.getElementById("xyz").style.padding-top = "10px";

Cái này có đúng không?

Câu trả lời #1

Ngoài các câu trả lời khác, nếu bạn muốn sử dụng ký hiệu gạch ngang cho các thuộc tính kiểu, bạn cũng có thể sử dụng:

document.getElementById("xyz").style["padding-top"] = "10px";

[chỉnh sửa 2023] Câu trả lời rất cũ. Cho những ai quan tâm: Tôi đã tạo một thư viện nhỏ để thay đổi kiểu dáng động @Github.

Câu trả lời #2

Nó gần đúng rồi.

Vì - là một toán tử trong javascript, bạn thực sự không thể có nó trong tên thuộc tính. Nếu bạn đang thiết lập border hoặc một từ đơn tương tự, mã của bạn sẽ hoạt động bình thường.

Tuy nhiên, điều bạn cần nhớ về padding-top, và đối với bất kỳ tên thuộc tính có dấu gạch nối nào, là trong JavaScript, bạn loại bỏ dấu gạch nối và viết chữ cái tiếp theo hoa, nên trong trường hợp của bạn sẽ là paddingTop.

Có một vài ngoại lệ khác. JavaScript có một số từ khóa được bảo lưu, nên bạn không thể đặt float như vậy, ví dụ. Thay vào đó, trong một số trình duyệt bạn cần sử dụng cssFloat và trong những trình duyệt khác sử dụng styleFloat. Chính vì những sự khác biệt như thế này mà người ta khuyến nghị nên sử dụng một framework như jQuery, cái mà xử lý các vấn đề không tương thích trình duyệt cho bạn...

Câu trả lời số 3

Cũng có hàm style.setProperty:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

document.getElementById("xyz").style.setProperty('padding-top', '10px');

// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');

Câu trả lời #4

Tôi giải quyết vấn đề tương tự bằng:

document.getElementById("xyz").style.padding = "10px 0 0 0";

Hy vọng điều đó giúp ích.

Câu trả lời số 5

Giả sử bạn có HTML như sau:

<div id='thediv'></div>

Nếu bạn muốn thay đổi thuộc tính style của div này, bạn sẽ sử dụng

document.getElementById('thediv').style[ATTRIBUTE] = '[VALUE]'

Thay thế [ATTRIBUTE] bằng thuộc tính style mà bạn muốn. Hãy nhớ bỏ '-' và viết chữ cái tiếp theo thành chữ hoa.

Ví dụ

document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding

Câu trả lời #6

document.getElementById("xyz").style.padding-top = '10px';

sẽ

document.getElementById("xyz").style["paddingTop"] = '10px';