Question

基于字体大小，选择元素 吗？

我希望在JavaScript中动态应用不同的样式（如font-weight和letter-spacing），具体取决于每个元素的字体大小。

我们可以选择所有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];

你可以通过以下方式获得元素的style属性：

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 - 根据字体大小选择元素并动态地将样式应用于该文本

2 个答案: