Question

这就是我所做的

function myFunction() {
var x = document.links.length;
var y = document.images.length;
alert("Links = " + x + " , " + "Images = " + y);
}

尝试在我的网站中获取不同内容的长度....

到目前为止，我已经找到了如何获取链接和图像的长度，但我找不到关于字体样式的任何答案......

我发现只有这一个

document.getElementById("myP").style.fontStyle = "italic";

<>在W3schools中，但仅用于将文本更改为斜体，而不是像过去半小时那样在一个段落中显示斜体的长度....

例如

<p id="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<em>Donec at erat semper,</em> tempor magna sed, aliquet lorem.
Morbi iaculis libero sed <em>elementum</em> fermentum. <p>

当然还有更多具有不同ID的段落

Answer 1

如果要查找的是整个文档中<em>个元素的数量：

var italicisedElements = document.getElementsByTagName('em').length;

＆＃13;

var italicisedElements = document.getElementsByTagName('em').length;

document.getElementById('result').innerHTML = 'Number of &lt;em&gt; elements: ' + italicisedElements;

＆＃13;

<p id="italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <em>Donec at erat semper,</em> tempor magna sed, aliquet lorem. Morbi iaculis libero sed <em>elementum</em> fermentum.
</p>

<div id="result"></div>

＆＃13;

要查找给定<em>元素中id个元素的数量，例如id="italic"：

var italicisedElements = document.querySelectorAll('#italic em').length;

＆＃13;

var italicisedElements = document.querySelectorAll('#italic em').length;

document.getElementById('result').innerHTML = 'Number of &lt;em&gt; elements: ' + italicisedElements;

＆＃13;

<p id="italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <em>Donec at erat semper,</em> tempor magna sed, aliquet lorem. Morbi iaculis libero sed <em>elementum</em> fermentum.
</p>

<div id="result"></div>

＆＃13;

要查找document中其CSS（无论是内嵌，style属性，还是通过其他地方设置CSS）的所有元素，请将文本设为italic：

var all = Array.from( document.querySelectorAll('*') ),
    italicisedElements = all.filter(function(node){
      return window.getComputedStyle(node).fontStyle === 'italic';
    }).length;

console.log(italicisedElements);

＆＃13;

var all = Array.from(document.querySelectorAll('*')),
  italicisedElements = all.filter(function(node) {
    return window.getComputedStyle(node).fontStyle === 'italic';
  }).length;

document.getElementById('result').innerHTML = 'Number of &lt;em&gt; elements: ' + italicisedElements;

＆＃13;

<p id="italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <em>Donec at erat semper,</em> tempor magna sed, aliquet lorem. Morbi iaculis libero sed <em>elementum</em> fermentum.
</p>

<div id="result"></div>

＆＃13;

Answer 2

这是纯粹的javascript答案：

function func(parent_css_selector, child_css_selector)
{
  return document.querySelectorAll(parent_css_selector + ">" + child_css_selector).length;
}

console.log("we have " + func('body', 'img') + " 'img' elements in 'body'");
console.log("we have " + func('body', 'a') + " 'a' elements in 'body'");
console.log("we have " + func('#italic', 'em') + " 'em' elements in '#italic'");

<img src='1.jpg' />
<img src='2.jpg' />
<a>1</a>
<a>2</a>
<a>3</a>
<p id="italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<em>Donec at erat semper,</em> tempor magna sed, aliquet lorem.
Morbi iaculis libero sed <em>elementum</em> fermentum. </p>

你可以用最简单的方式使用JQuery。

HTML DOM在具有ID的段落中获取字体样式的长度

2 个答案: