Câu trả lời:
Nó gần như chính xác.
Vì -là một toán tử javascript, bạn thực sự không thể có điều đó trong tên thuộc tính. Nếu bạn đang thiết lập,borderThay vào đó, hoặc một cái gì đó đơn lẻ như vậy, mã của bạn sẽ hoạt động tốt.
Tuy nhiên, điều bạn cần nhớ padding-topvà đố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à đặt chữ hoa tiếp theo, vì vậy trong trường hợp của bạn là như vậy paddingTop.
Có một số ngoại lệ khác. JavaScript có một số từ dành riêng, vì vậy bạn không thể đặt floatnhư vậy, chẳng hạn. Thay vào đó, trong một số trình duyệt bạn cần sử dụng cssFloatvà những trình duyệt khác styleFloat. Đối với những khác biệt như thế này, bạn nên sử dụng một khuôn khổ như jQuery, để xử lý các điểm không tương thích của trình duyệt cho bạn ...
Ngoài các câu trả lời khác, nếu bạn muốn sử dụng phân vùng gạch ngang cho thuộc tính kiểu, bạn cũng có thể sử dụng:
document.getElementById("xyz").style["padding-top"] = "10px";document.getElementById("xyz").style["paddingTop"] = '10px'.
Tôi giải quyết vấn đề tương tự với:
document.getElementById("xyz").style.padding = "10px 0 0 0";Hy vọng rằng sẽ giúp.
0. Và đôi khi bạn không muốn điều đó.
Ngoài ra còn có style.setPropertychức năng:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDecosystem/setProperty
document.getElementById("xyz").style.setProperty('padding-top', '10px');
// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');Giả sử bạn có HTML như sau:
<div id='thediv'></div>Nếu bạn muốn sửa đổ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 bạn muốn. Hãy nhớ bỏ dấu '-' và viết hoa chữ cái sau.
Ví dụ
document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes paddingfloat.
Tôi khuyên bạn nên sử dụng một hàm chấp nhận id phần tử và một đối tượng chứa các thuộc tính CSS để xử lý điều này. Bằng cách này, bạn viết nhiều kiểu cùng một lúc và sử dụng cú pháp thuộc tính CSS chuẩn.
//function to handle multiple styles
function setStyle(elId, propertyObject) {
var el = document.getElementById(elId);
for (var property in propertyObject) {
el.style[property] = propertyObject[property];
}
}
setStyle('xyz', {'padding-top': '10px'});Vẫn tốt hơn, bạn có thể lưu trữ các kiểu trong một biến, điều này sẽ giúp quản lý thuộc tính dễ dàng hơn nhiều, ví dụ:
var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);Hy vọng rằng sẽ giúp
document.getElementById("xyz").setAttribute('style','padding-top:10px');cũng sẽ làm công việc.