Question

我正在尝试使用javascript更改文本的颜色，但这个简单的事情不起作用，我不明白为什么..

＆＃13;

<!DOCTYPE html>

<html>
   <script>
      var y = document.getElementById('ya');
       y.style.color = "red";
   </script>

<p style="font-size:100px;" id="ya">
    hi
</p>

</html>

＆＃13;

Answer 1

试试这个，它正在运作。这是因为脚本现在在DOM元素渲染后运行。

＆＃13;

<p style="font-size:100px;" id="ya">
    hi
</p>

<script>
  var y = document.getElementById('ya');
  y.style.color = "red";
</script>

＆＃13;

Answer 2

因为javascript是在你的p标记之前加载的。如果你检查控制台，你会看到一个错误＆＃34; TypeError：无法读取属性＆＃39; style＆＃39; null。

＆＃13;

<!DOCTYPE html>

<html>
   
<p style="font-size:100px;" id="ya">
    hi
</p>
  <script>
      var y = document.getElementById('ya');
       y.style.color = "red";
   </script>

</html>

＆＃13;

Answer 3

您尝试查找的元素id不在DOM中，因为您的脚本在DOM元素呈现之前运行。

您的DOM位置应首先出现，然后脚本来操作DOM元素。

这个问题有两个解决方案：

<强> 1。将您的脚本移到DOM下面。

<p style="font-size:100px;" id="ya">
    hi
</p>
<script>
  var y = document.getElementById('ya');
  y.style.color = "red";
</script>

<强> 2。使用jQuery document.ready（）

<p style="font-size:100px;" id="ya">
    hi
</p>
<script>
 $(document).ready(function() {
   var y = document.getElementById('ya');
   y.style.color = "red";
 });
</script>

Answer 4

编写JavaScript时，id='ya'的元素未定义。将JavaScript放在脑中并使用onload = function(){/* code here */}或addEventListener('load', function(){/* code here */})，它应该每次都有效（如果你有多个onload，那么也许不是第一种方式。但是通过分配onload可以解决这个问题到一个var然后在另一个onload之后执行）。我真的会使用外部JavaScript，因此它存储在您的客户端缓存中，这将提高网站性能。如果您更新了JavaScript，如果您的网站已部署，请确保更改文件名，或者只是在您仍在处理缓存时清除缓存。

Answer 5

首先，您可以检查文件中包含的jQuery.min.js 你的代码很好。

测试这个

   <script>
      var y = document.getElementById('ya');
       y.css("color", "red");
   </script>

为什么我的css风格没变化？

5 个答案: