84
Làm cách nào để đặt màu nền CSS của phần tử HTML bằng JavaScript?Màu nền CSS trong JavaScript
A
Trả lời
130
Nói chung, thuộc tính CSS được chuyển đổi thành JavaScript bằng cách làm cho chúng camelCase mà không cần bất kỳ dấu gạch ngang. Vì vậy, background-color trở thành backgroundColor.
function setColor(element, color)
{
element.style.backgroundColor = color;
}
20
var element = document.getElementById('element'); element.style.background = '#FF00AA';
19
Hoặc, sử dụng một chút jQuery:
$('#fieldID').css('background-color', '#FF6600');
+0
Là những downvotes vì tôi tham chiếu jQuery? chỉ tò mò –
+0
Rất có thể, vì OP đã yêu cầu Javascript;) – Lodder
27
Bạn có thể tìm thấy mã của bạn là duy trì nhiều hơn nếu bạn giữ tất cả các phong cách của bạn, vv trong CSS và chỉ cần đặt/tên lớp unset trong JavaScript.
CSS của bạn rõ ràng sẽ là một cái gì đó như:
.highlight {
background:#ff00aa;
}
Sau đó, trong JavaScript:
element.className = element.className === 'highlight' ? '' : 'highlight';
+0
ermm có Javascript nhưng bạn đặt nó ở đâu ?? !!! không rõ ràng đủ – Led
+2
Tôi muốn nói rằng hiển nhiên vị trí đặt nó - bất kỳ nơi nào sau HTML bạn muốn thay đổi. – TeeJay
+1
Điều này là hợp lệ trong hầu hết các trường hợp, nhưng không phải trong trường hợp màu (hoặc bất kỳ thuộc tính nào) được định nghĩa trong cấu hình hoặc người dùng đã nhập, bạn không thể tạo lớp CSS cho mọi màu có thể;) –
6
Thêm yếu tố kịch bản này để yếu tố cơ thể của bạn:
<body>
<script type="text/javascript">
document.body.style.backgroundColor = "#AAAAAA";
</script>
</body>
2
KISS Trả lời:
document.getElementById('element').style.background = '#DD00DD';
+0
cách chúng tôi có thể làm điều đó cho lớp học? –
+0
Đối với lớp 'document.getElementByClass ('element'). Style.background = '# DD00DD';' –
2
Bạn có thể sử dụng:
<script type="text/javascript">
Window.body.style.backgroundColor = "#5a5a5a";
</script>
2
Bạn có thể làm điều đó với JQuery:
$(".class").css("background","yellow");
1
bạn có thể sử dụng
$('#elementID').css('background-color', '#C0C0C0');
+0
đây là jquery không javascript –
+0
@vignesh jQuery * là * JavaScript -__- – Novocaine
+0
@Novocaine jQuery được viết bằng JavaScript, Có . nhưng vẫn $ sẽ không hoạt động trừ khi bạn bao gồm thư viện jQuery đó;) –
5
var element = document.getElementById('element');
element.onclick = function() {
element.classList.add('backGroundColor');
setTimeout(function() {
element.classList.remove('backGroundColor');
}, 2000);
};.backGroundColor {
background-color: green;
}<div id="element">Click Me</div>
3
Bạn có thể thử
var element = document.getElementById('element_id');
element.style.backgroundColor = "color or color_code";
Ví dụ này.
var element = document.getElementById('firstname');
element.style.backgroundColor = "green";//Or #ff55ff
+1
'element.style.background-color' không phải là JavaScript hợp lệ. Đó là lý do tại sao các thuộc tính CSS được chuyển đổi thành CamelCase. – CrazyIvan1974
+0
Ồ, vâng bạn đúng .. !! Cảm ơn @ CrazyIvan1974 –
-1
$(".class")[0].style.background = "blue";
+0
Có quá đủ câu trả lời đúng cho câu hỏi này và câu trả lời này không cung cấp bất kỳ điều gì tốt hơn câu trả lời khác. – Novocaine
+0
Như Novocaine đã nói có rất nhiều câu trả lời ở đây. Nhưng trong tương lai, vui lòng xem xét chỉnh sửa bài đăng của bạn để thêm giải thích thêm về mã của bạn và tại sao nó sẽ giải quyết vấn đề. Một câu trả lời mà hầu hết chỉ chứa mã (ngay cả khi nó hoạt động) thường không giúp OP hiểu được vấn đề của họ. – SuperBiasedMan
0
$("body").css("background","green"); //jQuery
document.body.style.backgroundColor = "green"; //javascript
rất nhiều cách là ở đó tôi nghĩ rằng đó là rất dễ dàng và đơn giản
2
$('#ID/.Class').css('background-color', '#FF6600');
Bằng cách sử dụng jquery chúng ta có thể ta rNhận lớp của phần tử hoặc id để áp dụng nền css hoặc bất kỳ stylings khác
-1
Javascript:
document.getElementById("ID").style.background = "colorName"; //JS ID
document.getElementsByClassName("ClassName")[0].style.background = "colorName"; //JS Class
Jquery:
$('#ID/.className').css("background","colorName") // One style
$('#ID/.className').css({"background":"colorName","color":"colorname"}); //Multiple style
Các vấn đề liên quan
- 1. Màu nền CSS trong suốt
- 2. CSS: hình nền trên màu nền
- 3. CSS: màu nền chỉ bên trong lề
- 4. Độ mờ CSS - màu nền
- 5. Trích xuất "tràn" CSS "màu nền"
- 6. Màu nền hex thành biến JavaScript
- 7. Nền cuộn chậm trong Javascript hoặc CSS?
- 8. CSS rgba Màu nền xác nhận
- 9. cách đặt màu nền của toàn bộ trang trong css
- 10. In màu nền trong Chrome
- 11. Có thể thay đổi màu chữ dựa trên màu nền bằng css không?
- 12. Sử dụng hình nền ở trên cùng của màu nền trong CSS
- 13. Màu nền CSS không có hiệu lực trên DIV
- 14. CSS màu nền opacity và văn bản không làm việc
- 15. màu nền css mở rộng xa như văn bản?
- 16. Làm cho trang nền tô màu gradient với css
- 17. màu nền trong OpenGL
- 18. Vấn đề lặp lại nền CSS nền
- 19. Cách đặt màu nền trong jquery
- 20. HTML & CSS nền
- 21. màu nền gradient và hình nền DRYly
- 22. Màu nền của giao diện người dùng Jquery thay đổi màu nền trong một ngày
- 23. Đảo ngược màu phông chữ CSS tùy thuộc vào màu nền
- 24. HTML/CSS - Tại sao màu nền chuyển sang màu trắng khi in?
- 25. Màu nền trong Internet Explorer
- 26. select2 thay đổi màu nền
- 27. Làm cách nào để thay đổi màu nền bằng JavaScript?
- 28. Cách lấy màu nền của phần tử bằng javascript?
- 29. gradient nền trong IE7 với CSS
- 30. Đảo ngược màu của hình ảnh bằng CSS hoặc JavaScript
Tôi muốn thêm màu sắc rõ ràng cần phải được trong phần tử có dấu ngoặc kép .style.backgroundColor = "color"; ví dụ - element.style.backgroundColor = "orange"; Câu trả lời tuyệt vời – Catto