2

私は以下のようなHTML構造を持っています 

<div>Some text</div>
<div class='inBold'>Hello <b>Dude</b></div>
<div class='inBold'>Hello <span class="boldText">Dude</span></div>
<div class='inBold'>Hello <strong>Dude</strong></div>

そしてCSSは

.boldText{ font-weight : bold; }

ここで、文字列 Dude がすべての DIV で太字になっているかどうかを確認したかっただけです。太字の書式を設定する方法はたくさんあるので、HTML を扱うのは面倒なようです。DIV 内の一部のテキストが太字であるかどうかを特定するにはどうすればよいですか。これについて私を助けてください

4

5 に答える 5

2

これにより、treeWalker が作成され、className または tagName に関係なく、テキスト コンテンツ「Dude」を含む各ノードの太字の妥当性がチェックされます。

var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ALL, filter, false);

function filter(node) {
    if (node.textContent === 'Dude') {
        var computed = window.getComputedStyle(node, null);

        if(computed && computed.getPropertyValue("font-weight")=== "bold"){
            return NodeFilter.FILTER_ACCEPT;
        }

    } else {
        return NodeFilter.FILTER_SKIP;
    }
}

while(treeWalker.nextNode()) {
    //    Elements with bold text
    console.log(treeWalker.currentNode)
};

http://jsfiddle.net/bxcTp/1/

于 2013-04-30T13:02:00.327 に答える
2

おそらくこのように、これはページ上の各要素を選択し、 「bold」として設定されたfont-weightの計算されたスタイルをチェックします (「 b」または「strongによる場合もあります)。このルールに一致する場合、要素はコンソールに記録されます。

注: getComputedStyle は 'b' と 'strong' を検出するため、これらの要素を検出するための追加のテストは必要ありません。

CSS

.boldText {
    font-weight : bold;
}

HTML

<div>Some text</div>
<div class='inBold'>Hello <b>Dude</b>
</div>
<div class='inBold'>Hello <span class="boldText">Dude</span>
</div>
<div class='inBold'>Hello <strong>Dude</strong>
</div>

Javascript

Array.prototype.forEach.call(document.querySelectorAll("*"), function (element) {
    if (window.getComputedStyle(element).fontWeight === "bold") { // can also use .getPropertyValue("font-weight")
        console.log("bold: ", element);
    }
});

jsfiddleについて

もちろん、これはページ上のすべてをチェックしていますが、必要なテキストを探して、この原則を使用してそれらの要素だけをチェックするのはかなり簡単です。

この行に変更することにより：

if (element.textContent === "Dude" && window.getComputedStyle(element).fontWeight.toLowerCase() === "bold") {

jsfiddleについて

注: getComputedStyle は古いブラウザーではサポートされておらず、Array.forEach もサポートされていません。

document.querySelectorAll も、すべての古いブラウザーでサポートされているわけではありません。

Array.forEach にはこれらのシムがたくさんありますが、代わりに for または while ループに変更することもできます。

getComputedStyle はもう少し問題がありますが、よりクロス ブラウザーであるものが必要な場合は、これにより幅広いサポートが得られるはずです。

Javascript

function walkTheDOM(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walkTheDOM(node, func);
        node = node.nextSibling;
    }
}

function textContent(node) {
    if (typeof node.textContent !== "undefined" && node.textContent !== null) {
        return node.textContent;
    }

    var text = ""

    walkTheDOM(node, function (current) {
        if (current.nodeType === 3) {
            text += current.nodeValue;
        }
    });

    return text;
}

function camelCase(string) {
    return string.replace(/-([a-z])/g, function (matched) {
        return matched[1].toUpperCase()
    });
}

function getComputedStyleProperty(element, property) {
    if (!window.getComputedStyle) {
        if (document.defaultView && document.defaultView.getComputedStyle) {
            return document.defaultView.getComputedStyle(element).getPropertyValue(property);
        } else {
            var camelCased = camelCase(property);

            if (element.currentStyle) {
                return element.currentStyle[camelCased];
            } else {
                return element.style[camelCased];
            }
        }
    } else {
        return window.getComputedStyle(element).getPropertyValue(property);
    }
}

var elements = document.getElementsByTagName("*"),
    length = elements.length,
    i = 0,
    element;

while (i < length) {
    element = elements[i];

    if (textContent(element) === "Dude" && getComputedStyleProperty(element, "font-weight") === "bold") {
        console.log("bold: ", element);
    }

    i += 1;
}

jsfiddleについて

于 2013-04-30T13:00:01.203 に答える
1

このgetComputedStyle()関数を使用して、要素の現在の値を確認できます。これには、親要素から継承された値が含まれます。

// get a pointer to your element somehow
var elem;

// get the current weight
var weight = window.getComputedStyle(elem,null).getPropertyValue("font-weight");

のような識別子への数値の「マッピング」フォームはbold、MDN の記事にfont-weightあります。

于 2013-04-30T13:04:13.787 に答える
0

jQuery を使用できる場合は、次のサンプルを使用できます。

var consideredBoldsSelector = 'b, strong, span.boldText';
var expectedCount = $("div.inBold").length
var bAllMatched = $("div.inBold *:contains('Dude'):first-child").filter(consideredBoldsSelector).length === expectedCount

expectedCount予想される「ヒット」の数を操作できます。considerBoldsSelector を使用すると、太字に CSS に似たセレクターを簡単に追加できます。

:contains は大文字と小文字が区別されることに注意してください。

于 2013-04-30T12:49:39.997 に答える