Bagaimanakah Saya Boleh Mengakses Kandungan Dijana CSS Menggunakan JavaScript?

Mengakses Kandungan Dijana CSS dengan JavaScript

Dalam CSS, pembilang dan sifat kandungan boleh digunakan untuk menjana kandungan dinamik, seperti pengepala penomboran dan angka. Walau bagaimanapun, mengakses kandungan yang dijana dalam JavaScript ini menimbulkan cabaran, kerana nilai langsung mungkin tidak mudah diakses melalui kaedah standard.

Mengakses Nilai Kaunter

Satu pendekatan adalah dengan menggunakan antara muka Kaunter Gaya Tahap 2 DOM. Walau bagaimanapun, kaedah ini mempunyai had, seperti yang dibuktikan oleh ralat yang dihadapi semasa cuba mengakses nilai pembilang menggunakan getCounterValue().

Mengakses Kandungan Dijana

Kemungkinan lain adalah untuk kenal pasti unsur pseudo (:selepas dalam kes ini) dan ekstrak nilai nodnya. Walau bagaimanapun, pendekatan ini juga mungkin tidak boleh dipercayai kerana kekurangan mekanisme standard untuk mengakses kandungan unsur pseudo melalui DOM.

Penyelesaian

Sebagai penyelesaian, a penyelesaian berasaskan skrip boleh dilaksanakan yang menyerupai mekanisme pengiraan pelayar. Ini melibatkan merentasi DOM untuk mengira bilangan elemen yang mencetuskan pembilang dan memasukkan nilai yang sesuai.

window.onload = function () {
    var counters = document.querySelectorAll('.counter');
    var indices = [];
    for (var i = 0; i < counters.length; i++) {
        var counter = counters[i];
        var level = parseInt(counter.getAttribute('level'));
        while (indices.length <= level) indices.push(0);
        indices[level]++;
        indices = indices.slice(level + 1);
        var text = document.createTextNode('Figure ' + indices.join('.'));
        counter.parentNode.insertBefore(text, counter.nextSibling);

        if (counter.id !== '') {
            for (var j = 0; j < document.links.length; j++) {
                var link = document.links[j];
                if (
                    link.hostname === location.hostname &&
                    link.pathname === location.pathname &&
                    link.search === location.search &&
                    link.hash === '#' + counter.id
                ) {
                    var text = document.createTextNode('(' + indices.join('.') + ')');
                    link.parentNode.insertBefore(text, link.nextSibling);
                }
            }
        }
    }
};

Pendekatan ini meniru gelagat penyemak imbas dengan mengemas kini nilai pembilang secara eksplisit dan menjana label yang sesuai. Ia menyediakan penyelesaian yang lebih mudah alih dan boleh dipercayai daripada bergantung pada nilai kaunter langsung, terutamanya dalam persekitaran yang maklumat sedemikian tidak boleh diakses melalui API standard.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengakses Kandungan Dijana CSS Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!