如何在浏览器控制台访问指定DOM元素并修改文本颜色与字号？

步骤1：定位目标元素 #

打开浏览器控制台（快捷键F12或Ctrl+Shift+I），在控制台输入以下代码，精准定位“Other:”下方的四行文本元素：

// 找到包含"Other:"的预设分组
const otherPresetGroup = document.querySelector('.preset-group:has(h3:contains("Other:"))');
// 获取分组内的四个链接元素（即目标文本行）
const targetItems = otherPresetGroup.querySelectorAll('a');

如果你的浏览器不支持:has选择器，改用XPath定位：

const otherPresetGroup = $x('//div[contains(@class,"preset-group") and h3/text()="Other:"]')[0];
const targetItems = otherPresetGroup.querySelectorAll('a');

步骤2：修改样式 #

定位到元素后，可通过两种方式修改样式：

方法一：直接操作style对象（更灵活）

targetItems.forEach(item => {
  item.style.color = '#ff4500'; // 替换成你想要的颜色值
  item.style.fontSize = '18px'; // 替换成你想要的字号
});

方法二：使用setAttribute设置style属性

targetItems.forEach(item => {
  item.setAttribute('style', 'color: #2ecc71; font-size: 16px;');
});

执行代码后，页面上“Other:”下方的四行文本会立即更新样式。

内容的提问来源于stack exchange，提问作者silverkid