Bagaimanakah Saya Boleh Menggayakan Perkataan Pertama Setiap Perenggan Menggunakan CSS dan JavaScript?

Penggayaan CSS Perkataan Pertama dalam Perenggan

Meningkatkan penampilan perkataan tertentu dalam elemen teks ialah keperluan reka bentuk biasa. Dalam kes ini, matlamatnya adalah untuk menjadikan perkataan pertama bagi setiap perenggan di bawah div #content menonjol dengan meningkatkan saiz fonnya kepada 14 mata.

Pendekatan CSS

CSS menyediakan elemen pseudo untuk memilih dan menggayakan bahagian tertentu elemen. Malangnya, tiada unsur pseudo langsung untuk menyasarkan perkataan pertama. Kedua-dua :huruf pertama dan :baris pertama wujud, tetapi masing-masing merujuk kepada huruf pertama dan baris.

Penyelesaian JavaScript

Walaupun CSS tidak mempunyai perkataan pertama langsung pemilih, JavaScript menawarkan pendekatan alternatif. Kod boleh digunakan untuk mengenal pasti perkataan pertama setiap perenggan dan menggunakan gaya yang diingini.

Sebagai contoh, kod yang disediakan daripada Dynamicsitesolutions (http://www.dynamicsitesolutions.com/javascript/first-word-selector /) membolehkan pemilihan dan penggayaan perkataan pertama dalam mana-mana elemen:

function setFirstWord($el, fws, reset) {
    $el.each(function () {
        var e = $(this),
            fw = " ":fws+": ";

        if (e.data("fws") && !reset) {
            return;
        }

        if (reset) {
            e.find(":data(fws)").css({
                color: e.css("color"),
                fontSize: e.css("fontSize"),
                fontWeight: e.css("fontWeight"),
                fontStyle: e.css("fontStyle"),
            }).removeData("fws");
            return;
        }

        var text = e.html().replace(/\s+/g, " ").split(" ");
        e.html(fw + text.slice(1).join(" ") + text[0]);
        e.find(fws+":first").css({
            color: $text_color,
            fontSize: $first_word_size,
            fontWeight: $first_word_weight,
            fontStyle: $first_word_style,
        }).data("fws", true);
    });
}

Dengan menggunakan skrip ini, anda boleh berjaya menggayakan perkataan pertama perenggan dalam div #content.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Perkataan Pertama Setiap Perenggan Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!