Squarespace中点击文本改颜色及代码块ID插入位置咨询

1. 实现点击文本后修改其颜色 #

你的现有代码会把整个页面的文字颜色改成紫色，如果你只想修改被点击的目标文本或特定区块内的文字，可以调整代码逻辑：

针对单个文本元素的修改 #

先给需要点击的文本元素添加id="change"（在Squarespace编辑器中，可通过区块高级设置添加ID，或手动给文本标签加ID），然后修改函数直接操作点击的元素：

<script>
document.getElementById('change').onclick = changeColor;   

function changeColor(event) {
    // 修改被点击元素的文字颜色
    event.target.style.color = "purple";
    return false;
}   
</script>

针对整个区块内文字的修改 #

如果要点击区块后修改该区块内所有文字的颜色，只需把操作目标换成区块元素即可。

2. 定位特定区块时，区块ID的插入位置 #

在Squarespace里定位特定区块，有两种标准方式添加ID：

• 编辑器内添加（推荐）：选中目标区块，打开「区块设置」→「高级」→「CSS ID」，填入自定义ID（比如my-custom-block）
• 代码注入方式：如果需要通过代码给区块加ID，直接把ID写在区块的根容器元素上：

  <div id="my-custom-block" class="sqs-block">
    <!-- 区块内部内容 -->
  </div>
  

添加完ID后，在你的JavaScript代码中，就可以通过document.getElementById('你的区块ID')精准定位该区块，比如修改区块内文字颜色：

<script>
document.getElementById('my-custom-block').onclick = function() {
    this.style.color = "purple";
};
</script>

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