Question

我正在尝试使用jQuery将div'狗'的值从蓝色（CSS）更改为红色（javascript css代码），但javascript似乎无法正常运行。 CSS，JavaScript和jQuery都正确链接（已经检查过）。

HTML CODE：

 <!DOCTYPE html>
 <html>
  <head>
   <title></title>
   <link rel="stylesheet" type="text/css" href="style.css">
   <script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>       
   <script type="text/javascript" src="jquery-3.2.0.min.js"></script>
   <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
   <div id="dog"></div>
  </body>
 </html>

CSS代码：

#dog {
  background-color: blue;
  height: 200px;
  width: 200px;
}

JAVASCRIPT（jQuery）代码：

$("#dog").css("background-color", "red");

Answer 1

但javascript似乎无法正常运行。 CSS，JavaScript和 jQuery都正确链接（已检查）。

确保将javascript封装在$( document ).ready()中。如果脚本加载到head元素中，而HTML文档尚未完全加载，则应解决此问题。

但是，另一种解决方案是在script元素中使用body标记。

示例：

<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery .min.js"></script> <script type="text/javascript" src="jquery-3.2.0.min.js"></script> <script type="text/javascript" src="script.js"></script> <style> #dog { background-color: blue; height: 200px; width: 200px; } </style> </head> <body> <div id="dog"></div> <script> $("#dog").css("background-color", "red"); </script> </body> </html>

Answer 2

在你的js文件中执行此操作 -

window.onload = function () {
    $("#dog").css("background-color", "red");
}

原因是这个 -

window.onload - 在所有DOM，JS文件，图像，iframe，Extensions等完全加载后调用它。这等于$(window).load(function() {});

由于您有一个单独的js文件，并且您希望在加载页面时更改样式，因此您必须这样做。

为了更加了解，您可以参考 - Difference between onload and window.onload

不知道为什么.css（）不会改变div质量

2 个答案: