使用 getComputedStyle 来识别所有 P 标签的 CSS 字体粗细
Use getComputedStyle to identify the CSS font-weight for all P tags
Objective
- 使用 getComputedStyle 来识别分配给 CSS 的字体粗细
页面中的文本并将其记为 P tag/s.
开头的跨度中的文本
原因
- 创建一个小书签供个人使用,以识别 CSS 在哪里
用于视觉应用 strong/bolded 文本。然后一个决心可以
如果 CSS 应该替换为 HTML strong.
问题
- 仅适用于页面中的第一个 P 标签。
- 替换现有文本而不是添加到现有文本 word/s。
到目前为止的代码
var newClass = document.getElementsByTagName('p')
var length = newClass.length;
for (var i = 0; i < length; i++) {
newClass[i].className = newClass[i].className + "font--weight"
}
let pAll = document.querySelector('p.font--weight');
let calcStyles = window.getComputedStyle(pAll);
pAll.textContent = 'My computed font-weight is ' + calcStyles.getPropertyValue('font-weight');
pAll.innerHTML = '<span>' + pAll.textContent + '</span>';
- 这可以吗,如果不能,问题就结束了。
- 有没有更好的方法来实现这个?
- 在 JavaScript 而非 jQuery 中需要。
使用el.querySelectorAll()
得到nodeList,el.querySelector()
会return第一个节点仅选择器。然后你只需要使用 getComputedStyle(selector).getPropertyValue('style')
来获取计算样式。从那里只是将字符串连接在一起并设置 innerHTML 或 textContent 到字符串。
一旦你有了 nodeList,运行 元素通过一个循环得到每一个。
let pTagClass = document.querySelectorAll('.check-weight')
function getFontWeight(els) {
els.forEach(weight => {
// weight now represents each individual node in
// our nodeList that was passed into the function
let compStyle = getComputedStyle(weight).getPropertyValue('font-weight');
let str = `<span class="bookmark">font-weight is: ${compStyle},</span>`
let currentText = weight.textContent
weight.innerHTML = `${str} ${currentText}`
})
}
getFontWeight(pTagClass)
.check-weight {
font-family: "Bahnschrift", sans-serif;
}
.heavy {
font-weight: bold;
}
.normal {
font-weight: normal;
}
.light {
font-weight: lighter;
}
.bookmark {
font-weight: normal;
font-size: smaller;
background-color: yellow;
padding: 2px;
}
<p class="heavy check-weight">This is a heavy weight</p>
<p class="heavy check-weight">This is also a heavy weight</p>
<p class="light check-weight">This is a light weight</p>
<p class="normal check-weight">This is normal</p>
Objective
- 使用 getComputedStyle 来识别分配给 CSS 的字体粗细 页面中的文本并将其记为 P tag/s. 开头的跨度中的文本
原因
- 创建一个小书签供个人使用,以识别 CSS 在哪里 用于视觉应用 strong/bolded 文本。然后一个决心可以 如果 CSS 应该替换为 HTML strong.
问题
- 仅适用于页面中的第一个 P 标签。
- 替换现有文本而不是添加到现有文本 word/s。
到目前为止的代码
var newClass = document.getElementsByTagName('p')
var length = newClass.length;
for (var i = 0; i < length; i++) {
newClass[i].className = newClass[i].className + "font--weight"
}
let pAll = document.querySelector('p.font--weight');
let calcStyles = window.getComputedStyle(pAll);
pAll.textContent = 'My computed font-weight is ' + calcStyles.getPropertyValue('font-weight');
pAll.innerHTML = '<span>' + pAll.textContent + '</span>';
- 这可以吗,如果不能,问题就结束了。
- 有没有更好的方法来实现这个?
- 在 JavaScript 而非 jQuery 中需要。
使用el.querySelectorAll()
得到nodeList,el.querySelector()
会return第一个节点仅选择器。然后你只需要使用 getComputedStyle(selector).getPropertyValue('style')
来获取计算样式。从那里只是将字符串连接在一起并设置 innerHTML 或 textContent 到字符串。
一旦你有了 nodeList,运行 元素通过一个循环得到每一个。
let pTagClass = document.querySelectorAll('.check-weight')
function getFontWeight(els) {
els.forEach(weight => {
// weight now represents each individual node in
// our nodeList that was passed into the function
let compStyle = getComputedStyle(weight).getPropertyValue('font-weight');
let str = `<span class="bookmark">font-weight is: ${compStyle},</span>`
let currentText = weight.textContent
weight.innerHTML = `${str} ${currentText}`
})
}
getFontWeight(pTagClass)
.check-weight {
font-family: "Bahnschrift", sans-serif;
}
.heavy {
font-weight: bold;
}
.normal {
font-weight: normal;
}
.light {
font-weight: lighter;
}
.bookmark {
font-weight: normal;
font-size: smaller;
background-color: yellow;
padding: 2px;
}
<p class="heavy check-weight">This is a heavy weight</p>
<p class="heavy check-weight">This is also a heavy weight</p>
<p class="light check-weight">This is a light weight</p>
<p class="normal check-weight">This is normal</p>