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>