Codepen项目JavaScript失效：console.log无输出，滚动函数不工作

1. jQuery语法错误（滚动事件无效核心原因） #

你的滚动事件代码里，$(".text1").css("color: red")写法错误，jQuery的css()方法有两种正确调用方式：

• 单个属性设置：$(".text1").css("color", "red")
• 多个属性设置（传对象）：$(".text1").css({ color: "red" })

2. console.log无输出/获取不到元素的原因 #

• DOM加载时机问题：如果JS代码在目标<div>元素之前执行，document.getElementById('text1')会返回null，后续console也不会输出预期内容。解决办法：
  • 把JS代码放到页面底部（</body>标签前）
  • 用DOM加载完成事件包裹代码：

    // 原生JS方式
    document.addEventListener('DOMContentLoaded', function() {
      const masterEl = document.getElementById('text1')
      console.log(masterEl)
      console.log("masterEl")
    })
    
    // jQuery方式
    $(document).ready(function() {
      $(window).scroll(function(){
        $(".text1").css("color", "red");
      });
    })
    

• 未引入jQuery库：Codepen默认不会自动加载jQuery，你需要在Codepen的「Settings」→「JavaScript」→「Add External Scripts/Pens」里搜索并添加jQuery，否则$会报错，导致后续代码全部无法执行。

修正后的完整代码示例 #

$(document).ready(function() {
  // 滚动事件逻辑
  $(window).scroll(function(){
    $(".text1").css("color", "red");
  });

  // 元素获取与日志输出
  const masterEl = document.getElementById('text1')
  console.log(masterEl)
  console.log("masterEl")
})

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