登陆 注册

为什么用JS操作html或css没有效果?

守望者 2020-03-26 357人围观 ,发现0个评论 javascripthtmlcss

     大多数人都遇到过这样的问题,有时在<script>标签里面操作html元素或css样式,语法和函数的调用等都没有问题,然后就是不见发生效果。


    例如,下面这个例子里,我们编辑一个html文件,并用js改变p标签的背景颜色为橙色,代码如下:


<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>测试</title>

      <script>

           var p = document.getElementById("pp");
           p.style.backgroundColor = "orange";

      </script>
    </head>

    <body>

        <p id="pp">这是一个p元素</p>

    </body>
</html>

   

  用浏览器打开这个html文件,效果如下:

javascript操作html效果


     此时发现,背景色没有发生改变,按F12调到控制台,报错说我们调用了一个空元素的style属性,

有的人就会很疑惑,明明存在这个元素,而且调用方式也没有错。


其实是因为,我们犯了一个比较隐蔽的错误,那就是忽略了js和html代码的加载顺序。

当浏览器进行解析时,首先执行<head>标签里面的js代码,而后才开始加载body里面的标签。

当在执行js代码时,此时还没有加载body里面的元素,所以,得到的元素为null


    解决办法就是在body里面的元素加载完毕之后再执行js代码,有两个方法:


方法一,调用window.onload()函数 :

            意思就是当body里面的元素加载完毕后再执行window.onload()函数 里面的js指令,实例代码如下:


<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>测试</title>

      <script>

          window.onload = function(){
          	 var p = document.getElementById("pp");
             p.style.backgroundColor = "orange";
           }

      </script>
    </head>

    <body>

        <p id="pp">这是一个p元素</p>

    </body>
</html>


方法二,将包含指定js指令的<script>标签放在将要操作的html元素后面,此时二者加载顺序正确,实例代码如下:


<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>测试</title>

    </head>

    <body>

        <p id="pp">这是一个p元素</p>

       <script>

          	 var p = document.getElementById("pp");
             p.style.backgroundColor = "orange";

      </script>
      
    </body>
</html>


此时再用浏览器打开,发现p标签背景变成了橙色,并且控制台没有了报错。


      转载请附上本文链接:https://tufeng.xyz/javascript/29.html,谢谢合作!

请发表您的评论
请关注微信公众号
微信二维码