CSS

Question

有没有办法根据字体大小在JavaScript中select元素？

我想根据每个元素的字体大小在 JavaScript 中动态应用不同的样式（如字体粗细和字母间距）。

我们可以 select 所有 p 标签并对它们应用样式。

p { color: green; }

我想知道我是否可以做这样的事情（或达到那种效果；我知道下面的颜色不起作用）：

font-size:14px { /* All font that is size 14px is now red*/ color: red; } font-size:16px { /* All font that is size 16px is now blue*/ color: blue; }

Answer 1

可以应用来自 javascript 的样式：

document.getElementById("[id]").style.[css rule] = [value];

然后您通过以下方式获得元素的样式属性：

window.getComputedStyle([element], null).getPropertyValue('[css rule]')

示例：

var all = document.getElementsByTagName("p");
for (var i = 0, max = all.length; i < max; i++) {
  if (window.getComputedStyle(all[i], null).getPropertyValue('font-size') > "15px") {
    all[i].style.fontWeight = "900";
  } else {
    all[i].style.fontWeight = "100";
  }
}

#myPara {
  font-size: 14px;
}
p+p {
  font-size: 18px;
}

<p id="myPara">This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>

Answer 2

希望对您有所帮助。

$( "p" ).each(function() {
    if($(this).css('font-size')=='12px'){
        //Apply Styles
        $(this).css('color','red')
    }
})

JSFiddle

CSS - 根据字体大小选择元素并将样式动态应用到该文本

CSS - Selecting elements based on font-size and dynamically applying styles to that text

html

javascript

dynamic