Question

我有一个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中的某些文本是否以粗体显示。请帮帮我

Answer 1

var divs = document.getElementsByClassName('inBold');
for(var i = 0; i < divs.length; i++)
    console.log(isBold(divs[i]));

function isBold(node){
     var childNodes = node.childNodes;
     for(var i = 0; i < childNodes.length; i++)
         if(childNodes[i].nodeType != 3 && (childNodes[i].className.indexOf('boldText') != -1 
            || childNodes[i].tagName == 'B'
            || childNodes[i].tagName == 'STRONG'))
             return true;
     return false;
}

请参阅fiddle

Answer 2

这将创建一个treeWalker，并检查每个节点的文本内容“Dude”是否为粗体，无论className或tagName如何：

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/

Answer 3

也许是这样，这会选择页面上的每个元素，然后检查computed style font-weight设置为'bold'（也可以是'b'或'{{ 3}}）。如果它符合此规则，则该元素将记录到控制台。

注意：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);
    }
});

在strong

上

当然，这是检查页面上的所有内容，但查找所需文本并使用此原则检查这些元素非常简单。

通过更改为此行：

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

在jsfiddle

上

注意：旧版浏览器不支持getComputedStyle，jsfiddle

也不支持

所有旧版浏览器也不支持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;
}

在Array.forEach

上

Answer 4

您可以使用getComputedStyle()函数来确定元素的当前值。这包括来自父元素的任何继承值：

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

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

MDN article on font-weight可以找到bold等数字值到“{{1}}等标识符的”映射“。

Answer 5

如果你可以使用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，您可以操纵您期望的“点击次数”，并且使用ConsideBoldsSelector，您可以轻松地为您的粗体添加类似css的选择器。

请注意：contains包含区分大小写。

确定DIV内的文本是粗体

5 个答案: