Hướng dẫn javascript convert css to inline styles - javascript chuyển đổi css sang kiểu nội tuyến

Tôi muốn thêm tất cả các kiểu CSS của một yếu tố cụ thể vào thuộc tính kiểu nội tuyến của nó. Ví dụ:

Tôi có:

and:

#d { background: #444444; width: 50px; height: 20px; display: inline-block; }

Bây giờ tôi muốn một chức năng JavaScript biến div của tôi thành điều này:

Làm ơn giúp tôi. Và, nhân tiện, tôi không muốn bất kỳ kiểu CSS nào viết lại bất kỳ kiểu nội tuyến hiện có nào.

Marco Bonelli

59.3K20 Huy hiệu vàng114 Huy hiệu bạc118 Huy hiệu đồng20 gold badges114 silver badges118 bronze badges

Hỏi ngày 2 tháng 8 năm 2014 lúc 17:19Aug 2, 2014 at 17:19

7

Bạn có thể làm điều gì đó như thế này:

function applyStyle(el) {
    s = getComputedStyle(el);

    for (let key in s) {
        let prop = key.replace(/\-([a-z])/g, v => v[1].toUpperCase());
        el.style[prop] = s[key];
    }
}

let x = document.getElementById('my-id');
applyStyle(x);

Trong đó x là yếu tố bạn muốn áp dụng phong cách.

Về cơ bản, chức năng này có được kiểu tính toán của phần tử và sau đó sao chép từng thuộc tính (như đệm, nền, màu sắc, v.v.) theo kiểu nội tuyến của phần tử.

Tôi không biết tại sao bạn cần phải làm điều này, nhưng theo tôi là một cách tiếp cận thực sự bẩn. Cá nhân tôi sẽ tư vấn chống lại nó.

Đã trả lời ngày 2 tháng 8 năm 2014 lúc 17:49Aug 2, 2014 at 17:49

Marco Bonellimarco BonelliMarco Bonelli

59.3K20 Huy hiệu vàng114 Huy hiệu bạc118 Huy hiệu đồng20 gold badges114 silver badges118 bronze badges

5

Hỏi ngày 2 tháng 8 năm 2014 lúc 17:19

    function transferComputedStyle(node) {
        var cs = getComputedStyle(node, null);
        var i;
        for (i = 0; i < cs.length; i++) {
            var s = cs[i] + "";
              node.style[s] = cs[s];
        }
    }
    function transferAll() {
        var all = document.getElementsByTagName("*");
        var i;
        for (i = 0; i < all.length; i++) {
            transferComputedStyle(all[i]);
        }
    }

Bạn có thể làm điều gì đó như thế này:

Trong đó x là yếu tố bạn muốn áp dụng phong cách.Aug 2, 2014 at 18:13

Về cơ bản, chức năng này có được kiểu tính toán của phần tử và sau đó sao chép từng thuộc tính (như đệm, nền, màu sắc, v.v.) theo kiểu nội tuyến của phần tử.atmin

Tôi không biết tại sao bạn cần phải làm điều này, nhưng theo tôi là một cách tiếp cận thực sự bẩn. Cá nhân tôi sẽ tư vấn chống lại nó.1 silver badge7 bronze badges

Đã trả lời ngày 2 tháng 8 năm 2014 lúc 17:49thank you for that!) is that one of the properties it tries to transfer on the element style from the Computed Style is the cssText.

Marco Bonellimarco Bonelli

Cái này?

var el = document.querySelector("#answer-25097808 > div > div.answercell.post-layout--right > div.s-prose.js-post-body > pre"); // change yourId to id of your element, or you can write “body” and it will convert all document
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){
    el = els[i]
    s = getComputedStyle(el)
    for (let styleKey in el.style) {
        for (let computedStyleKey in s) {
            let computedStyleKeyCamelCase = computedStyleKey.replace(/\-([a-z])/g, v => v[1].toUpperCase());
            if ((typeof el.style[styleKey] != "function") && (styleKey != 'cssText')){
                if(styleKey == computedStyleKeyCamelCase) {
                    el.style[styleKey] = s[computedStyleKey];
                }
            }
        }
    }
}

Chỉ cần gọi Transferall Onload, hoặc bất cứ nơi nào.

Đã trả lời ngày 2 tháng 8 năm 2014 lúc 18:13Jun 11, 2021 at 16:49

ams1ams1ams1

Atminatmin5 bronze badges

3721 Huy hiệu bạc7 Huy hiệu đồng
If you are new in jQuery and you don't know how to add and work then follow this link

#d { background: #444444; width: 50px; height: 20px; display: inline-block; }

Tôi nghĩ rằng vấn đề với câu trả lời được chấp nhận (cảm ơn bạn vì điều đó!) Là một trong những propties mà nó cố gắng chuyển sang phong cách el từ phong cách được tính toán là cssText.

Nếu chúng ta loại trừ khỏi Transfer cssText và các thuộc tính khác thực sự là phương thức, nó hoạt động!

Vì vậy, dựa trên câu trả lời được chấp nhận và câu trả lời này, tôi đã có:Aug 2, 2014 at 17:39

P.S .: Mã trên sẽ chạy trong bảng điều khiển công cụ dành cho nhà phát triển (đã thử nó trong chrome)Avoid

Đã trả lời ngày 11 tháng 6 năm 2021 lúc 16:492 gold badges9 silver badges20 bronze badges