javascript - 尝试在获取长度值时在 JavaScript 中设置字体大小

Question

我试图根据标题的长度将偶数标题 ID 的属性设置为 16px 或 8px。我已经添加了这段代码，但它似乎并没有在我的网站上生效。

var title = document.getElementById("event-title");
var length = title.length;
if(length >= 14){
	title.setAttribute('style','font-size:8px !important;');
}
else {
	title.setAttribute('style','font-size:16px !important;');
}

<h2 id="event-title">Example Title Goes Here</h2>
<h2 id="event-title">Example</h2>

任何帮助都会很棒!

谢谢，

Answer 1

几个问题:

1. 您在多个元素上具有相同的 id 值。

2. DOM 元素没有length 属性；您可能需要 .nodeValue.length 或 .innerHTML.length 或 .innerText.length 或 .textValue.length。 (要弄清楚是哪一个，请参阅 MDN 以了解它们各自的含义。)

var title = document.getElementById("event-title");
var length = title.innerHTML.length;
if(length >= 14){
	title.setAttribute('style','font-size:8px !important;');
}
else {
	title.setAttribute('style','font-size:16px !important;');
}

<h2 id="event-title">Example Title Goes Here</h2>

如果您尝试对多个元素执行此操作，您将需要使用其他东西来识别它们(可能是一个类)，并且您需要使用不同的查找(可能是 document. querySelectorAll).然后您可以遍历它们来执行上述操作:

var titles = document.querySelectorAll(".event-title");
titles.forEach(function(title) {
  var length = title.innerHTML.length;
  if (length >= 14){
    title.setAttribute('style','font-size:8px !important;');
  }
  else {
    title.setAttribute('style','font-size:16px !important;');
  }
});

<h2 class="event-title">Example Title Goes Here</h2>
<h2 class="event-title">Short</h2>

(querySelectorAll 返回的 NodeList 在 IE8-IE11 等过时的浏览器上没有 forEach，但您可以轻松地填充它:

if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
    Object.defineProperty(NodeList.prototype, "forEach", {
        value: Array.prototype.forEach,
        configurable: true
    });
}

Example .在 IE8 或 IE9+ 的 [in] 兼容模式下，您还需要填充 Array.prototype.forEach。请参阅 MDN 了解如何。或者使用 for 循环。)

---

旁注:如果您在 inline 样式中使用 !important 标记，则可能值得退后一步，弄清楚为什么您的事物如此相互冲突，因为内联样式胜过 CSS 样式(不管具体性如何)，除非 CSS 样式上有 !important。所以你有双重 !important，这表明一些重构是有序的......

---

旁注 2:替换整个 style 属性是可行的，但如果您想要更细粒度的方法，请分配给元素的 style 对象的属性:title.style.fontSize = "8px";