Tôi đã thử nghiệm chức năng Javascript Javascript ngày hôm nay và nhận thấy rằng khi .style.cssText được sử dụng, nó chỉ cung cấp cho tôi CSS mà tôi đã đặt bằng JS. Thay vào đó tôi muốn nhận được tất cả CSS cho các phần tử vì vậy tôi đoán rằng tôi đang làm điều gì đó sai hoặc có thể cần một hàm khác thay vì getComputedStyle nhưng cho toàn bộ CSS chứ không phải giá trị thuộc tính duy nhất nhưng tôi không thể tìm thấy những gì tôi cần khi tìm kiếm.Cách lấy tất cả CSS của phần tử
Vì vậy, câu hỏi của tôi là làm thế nào tôi có thể nhận được đầy đủ CSS từ phần cuối của mã của tôi như:
background-color: #ffcccc; font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif; font-size: 13px; color: #ff0000;
thay vì CSS ngắn hơn hiện nay đó là đầu ra?
<html>
<head>
<style type="text/css" media="screen">
.MyDiv001 {
background-color: #ffcccc;
font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;
}
.MyDiv002 {
background-color: #ccffcc;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<div id="MyDiv001" class="MyDiv001">This is MyDiv001</div>
<div id="MyDiv002" class="MyDiv002">This is MyDiv002</div>
<br /><hr><br />
<script type="text/javascript">
// Select the MyDiv001 element
var MyDiv001 = document.getElementById("MyDiv001"); // Select MyDiv001
// Set some style property values for MyDiv001
MyDiv001.style.setProperty("font-size", "13px", null);
MyDiv001.style.setProperty("color", "#ff0000", null);
// Get the Computed Style for MyDiv001
var MyDiv001Style = window.getComputedStyle(MyDiv001);
// Show the MyDiv001 style property values
document.write("MyDiv001 background-color = " + MyDiv001Style.getPropertyValue("background-color") + "<br />");
document.write("MyDiv001 font-family = " + MyDiv001Style.getPropertyValue("font-family") + "<br />");
document.write("MyDiv001 font-size = " + MyDiv001Style.getPropertyValue("font-size") + "<br /><br />");
// Select the MyDiv002 element
var MyDiv002 = document.getElementById("MyDiv002"); // Select MyDiv002
// Set some style property values for MyDiv002
MyDiv002.style.setProperty("font-size", "16px", null);
MyDiv002.style.setProperty("color", "#0000ff", null);
// Get the Computed Style for MyDiv002
var MyDiv002Style = window.getComputedStyle(MyDiv002);
// Show the MyDiv002 style property values
document.write("MyDiv002 background-color = " + MyDiv002Style.getPropertyValue("background-color") + "<br />");
document.write("MyDiv002 font-family = " + MyDiv002Style.getPropertyValue("font-family") + "<br />");
document.write("MyDiv002 font-size = " + MyDiv002Style.getPropertyValue("font-size") + "<br /><br />");
// Not what i was expecting
document.write("MyDiv001 CSS = " + MyDiv001.style.cssText+ "<br />"); // How do i get the full css?
document.write("MyDiv002 CSS = " + MyDiv002.style.cssText+ "<br />"); // How do i get the full css?
</script>
</body>
</html>
Chỉnh sửa - Tôi muốn câu trả lời sử dụng Javascript thông thường nếu có thể, hy vọng phiên bản cố định của mã của tôi và lý do tại sao nó không trả lại CSS đầy đủ.
thể trùng lặp của [Có thể jQuery nhận được tất cả các phong cách CSS kết hợp với một yếu tố?] (Http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with -an-element) –
Không, không phải, đó là sử dụng jQuery trong khi tôi có JS thông thường trong mã trên. Tôi cũng muốn tìm hiểu những gì tôi đã làm sai vì vậy tôi biết lý do tại sao nó không trả lại tất cả các yếu tố CSS trở lại. – zeddex
Tìm thấy một bài viết http://www.quirksmode.org/dom/getstyles.html - Tôi không có chuyên gia về js nhưng có vẻ khá thẳng về phía trước – ggdx