Hướng dẫn can javascript read css? - javascript có thể đọc css không?

Question

Based on @dude answer this should return relevant styles in a object, for instance:

Nội dung chính Show

Hạn chế nhúng hoặc chèn code CSS và Javascript inline
Embedded CSS
Embedded JS
.red {color: red;}
CSS đặt trước, JS đặt sau
Đây là kịch bản để thúc đẩy domInteractive nhanh hơn.
Như bạn đã thấy trong ví dụ trên, JS có thể làm gián đoạn việc tải HTML. Do đó, thông thường JS được đặt ở cuối và load sau cùng. Mặt khác, CSS thường được đặt ở đầu trang để người dùng không phải thấy một giao diện trang web kém thẩm mỹ khi vừa vào trang.
Khi muốn chèn một file CSS bên ngoài vào website, ta có hai cách:

.recurly-input {                                                                                                                                                                             
  display: block;                                                                                                                                                                            
  border-radius: 2px;                                                                                                                                                                        
  -webkit-border-radius: 2px;                                                                                                                                                                
  outline: 0;                                                                                                                                                                                
  box-shadow: none;                                                                                                                                                                          
  border: 1px solid #beb7b3;                                                                                                                                                                 
  padding: 0.6em;                                                                                                                                                                            
  background-color: #f7f7f7;                                                                                                                                                                 
  width:100%;                                                                                                                                                                                
}

This will return:

backgroundColor:
"rgb(247, 247, 247)"
border
:
"1px solid rgb(190, 183, 179)"
borderBottom
:
"1px solid rgb(190, 183, 179)"
borderBottomColor
:
"rgb(190, 183, 179)"
borderBottomLeftRadius
:
"2px"
borderBottomRightRadius
:
"2px"
borderBottomStyle
:
"solid"
borderBottomWidth
:
"1px"
borderColor
:
"rgb(190, 183, 179)"
borderLeft
:
"1px solid rgb(190, 183, 179)"
borderLeftColor
:
"rgb(190, 183, 179)"
borderLeftStyle
:
"solid"
borderLeftWidth
:
"1px"
borderRadius
:
"2px"
borderRight
:
"1px solid rgb(190, 183, 179)"
borderRightColor
:
"rgb(190, 183, 179)"
borderRightStyle
:
"solid"
borderRightWidth
:
"1px"
borderStyle
:
"solid"
borderTop
:
"1px solid rgb(190, 183, 179)"
borderTopColor
:
"rgb(190, 183, 179)"
borderTopLeftRadius
:
"2px"
borderTopRightRadius
:
"2px"
borderTopStyle
:
"solid"
borderTopWidth
:
"1px"
borderWidth
:
"1px"
boxShadow
:
"none"
display
:
"block"
outline
:
"0px"
outlineWidth
:
"0px"
padding
:
"0.6em"
paddingBottom
:
"0.6em"
paddingLeft
:
"0.6em"
paddingRight
:
"0.6em"
paddingTop
:
"0.6em"
width
:
"100%"

Code:

function getStyle(className_) {

    var styleSheets = window.document.styleSheets;
    var styleSheetsLength = styleSheets.length;
    for(var i = 0; i < styleSheetsLength; i++){
        var classes = styleSheets[i].rules || styleSheets[i].cssRules;
        if (!classes)
            continue;
        var classesLength = classes.length;
        for (var x = 0; x < classesLength; x++) {
            if (classes[x].selectorText == className_) {
                return _.pickBy(classes[x].style, (v, k) => isNaN(parseInt(k)) && typeof(v) == 'string' && v && v != 'initial' && k != 'cssText' )
            }
        }
    }

}

Techblog
Development

Hướng dẫn can javascript read css? - javascript có thể đọc css không?

Khi xây dựng một trang web, bên cạnh việc code đủ tính năng và giao diện đẹp, thì các web developer cũng cần chú ý tới tốc độ tải trang. Có một tốc độ tải trang nhanh sẽ giúp gia tăng trải nghiệm người dùng, và góp phần đưa website lên thứ hạng cao hơn trên trang tìm kiếm Google. Bài viết nàyBizfly Cloud sẽ cung cấp cho bạn đọc những mẹo hữu ích nhất để tối ưu hóa các file HTML, CSS và JS (javascript), giúp tăng tốc độ tải trang web.Bizfly Cloud sẽ cung cấp cho bạn đọc những mẹo hữu ích nhất để tối ưu hóa các file HTML, CSS và JS (javascript), giúp tăng tốc độ tải trang web.

Hạn chế nhúng hoặc chèn code CSS và Javascript inline

Khi cần chèn code CSS hoặc Javascript vào website, ta có ba cách:

Inline:

Inline CSS

DÙNG THỬ MIỄN PHÍ và NHẬN ƯU ĐÃI 3 THÁNG tại: Manage.bizflycloud

Inline JS

DÙNG THỬ MIỄN PHÍ và NHẬN ƯU ĐÃI 3 THÁNG tại: Manage.bizflycloud

Inline JS

Nhúng (embed):

Embedded CSS

.red {color: red;}

Embedded JS

alert('Hello World');

Tạo file riêng

DÙNG THỬ MIỄN PHÍ và NHẬN ƯU ĐÃI 3 THÁNG tại: Manage.bizflycloud

Inline JS

DÙNG THỬ MIỄN PHÍ và NHẬN ƯU ĐÃI 3 THÁNG tại: Manage.bizflycloud

Inline JS

Nhúng (embed):

Embedded CSS

.red {color: red;}

Embedded JS

Inline JS

Nhúng (embed):

Embedded CSS

.red {color: red;}

Embedded JS

alert('Hello World');

<html>

Inline JShead>

Nhúng (embed):title>Title</title>

Inline JSscript src="script.js"></script>

Inline JS/head>

Inline JSbody>

Nhúng (embed):

Inline JS/body>

</html>

Inline JS

Nhúng (embed):

Embedded CSS

.red {color: red;}

Embedded JS

alert('Hello World');

Inline JS

Nhúng (embed):

Embedded CSS

.red {color: red;}

Embedded JS

alert('Hello World');

Tạo file riêng

External CSS

External JS

Trên thực tế, cách chèn code inline và nhúng sẽ tạo ra ít HTTP request đến máy chủ hơn, từ đó giúp tốc độ tải trang web nhanh hơn. Tuy nhiên, hai cách này chỉ phù hợp với các trang web có ít code CSS và Javascript. Bởi vì khi lượng code tăng lên, chúng ta sẽ rất khó kiểm soát, bảo trì hay sửa lỗi.

Dưới đây, là cách một trang tải script với defer, đặt trong thẻ head:

Script được tìm nạp không đồng bộ và chỉ được chạy sau khi đã phân tích cú pháp HTML.

Phân tích cú pháp hoàn tất giống như khi ta đặt script ở cuối thẻ body, nhưng nhìn chung, quá trình chạy script đã hoàn tất hoàn toàn trước đó, bởi vì script đã được tải xuống song song với phân tích cú pháp HTML.

Vì vậy, đây chính là giải pháp tối ưu khi nói đến tốc độ.

Chặn phân tích cú pháp/parsing

Async chặn phân tích cú pháp của trang trong khi Defer thì không.

Chặn render

Cả async và defer đều không đảm bảo bất cứ gì về việc chặn render. Mà vấn đề này tùy thuộc vào bạn và script của bạn (ví dụ: đảm bảo script chạy sau onLoad chẳng hạn).

domInteractive

Các script được đánh dấu defer sẽ được chạy ngay sau domInteractive, sự kiện sẽ diễn ra sau khi HTML được tải, được phân tích cú pháp và DOM được tạo.

CSS và hình ảnh tại thời điểm này vẫn được phân tích cú pháp và được tải.

Khi quá trình hoàn tất, trình duyệt sẽ trình phát domComplete và sau đó là onLoad.

domInteractive rất quan trọng vì thời gian của nó được xem là thước đo cho tốc độ tải về mặt cảm nhận. rất quan trọng vì thời gian của nó được xem là thước đo cho tốc độ tải về mặt cảm nhận.

Sắp xếp các yếu tố 1 cách trật tự

Một trường hợp defer khác: các script được đánh dấu không đồng bộ sẽ được chạy theo thứ tự thông thường khi chúng khả dụng.

Kết

Vậy điều tốt nhất chúng ta nên làm để tăng tốc độ tải trang khi sử dụng script: là đặt chúng vào phần đầu trang và thêm thuộc tính defer vào thẻ script: