おそらくこのように、これはページ上の各要素を選択し、 「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について