m0_75157125 2024-07-15 15:03 采纳率: 100%
浏览 2
已结题

style识别为null

img

img


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width:200px;
            height:200px;
            background-color:pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 1.获取元素
        const box = document.querySelector('.Fbox')
        // 2.修改样式属性  对象.style.样式属性='值'
        box.style.width = '500px'
        box.style.backgroundColor='hotpink'
    </script>
</body>
</html>

照着学习视频上的代码搞的但是style识别为null了，之前的学习视频也有log识别失败得用dir
这个识别为null的错误是因为最新版google引起的吗

  • 写回答

3条回答 默认 最新

  • 阿里嘎多学长 2024-07-15 15:03
    关注

    以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

    从您提供的信息来看，确实存在几个问题导致 style 属性被识别为 null：

    1. 元素选择错误：在您的 JavaScript 代码中，您使用了 document.querySelector('.Fbox') 来选择元素，但是根据您提供的 HTML 代码，正确的类名应该是 .box。因此，选择器应该是 document.querySelector('.box')。

    2. 样式属性赋值语法错误：在 JavaScript 中，您需要确保属性赋值时使用等号 = 而不是单个等号。例如，box.style.backgroundColor='hotpink' 应该是 box.style.backgroundColor = 'hotpink'。

    3. 浏览器更新不太可能是问题原因：浏览器的更新通常旨在提高兼容性和修复已知问题，而不是引入新的问题。因此，这个问题不太可能是由浏览器更新引起的。

    以下是修正后的代码示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 1.获取元素，注意类名是 .box 而不是 .Fbox
        const box = document.querySelector('.box');
        // 2.修改样式属性，确保使用等号进行赋值
        box.style.width = '500px';
        box.style.backgroundColor = 'hotpink'; // 注意这里使用了正确的属性名和等号
    </script>
</body>
</html>

    确保您的代码中没有其他的语法错误，并且浏览器没有加载错误或缓存问题。如果问题依旧存在，您可能需要检查浏览器的控制台以获取更多错误信息，或者尝试在不同的浏览器或环境中运行代码以确定问题所在。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 7月23日
  • 已采纳回答 7月15日
  • 创建了问题 7月15日

悬赏问题

  • ¥30 关于#java#的问题，请各位专家解答！
  • ¥30 vue+element根据数据循环生成多个table，如何实现最后一列 平均分 合并
  • ¥20 pcf8563时钟芯片不启振
  • ¥20 pip2.40更新pip2.43时报错
  • ¥15 换yum源但仍然用不了httpd
  • ¥50 C# 使用DEVMOD设置打印机首选项
  • ¥15 麒麟V10 arm安装gdal
  • ¥20 OPENVPN连接问题
  • ¥15 flask实现搜索框访问数据库
  • ¥15 mrk3399刷完安卓11后投屏调试只能显示一个设备