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

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;

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

document.getElementById('result').innerHTML = 'Number of <em> elements: ' + italicisedElements;

<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>

查找<em>的个数给定 id 的元素内的元素，例如 id="italic" :

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

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

document.getElementById('result').innerHTML = 'Number of <em> elements: ' + italicisedElements;

<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>

查找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);

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

document.getElementById('result').innerHTML = 'Number of <em> elements: ' + italicisedElements;

<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>