为什么我的CSS样式没有变化？
[英]Why isn't my css style changing?
问题描述
I am trying to change the color of the text using javascript but something as simple as this isnt working and I dont understand why.. 
我正在尝试使用javascript更改文本的颜色，但像这样的简单操作无法正常工作，我不明白为什么。
<!DOCTYPE html> <html> <script> var y = document.getElementById('ya'); y.style.color = "red"; </script> <p style="font-size:100px;" id="ya"> hi </p> </html>
5 个解决方案
解决方案1
4 2016-10-20 04:28:20
Try this, it's working. 试试这个，它正在工作。 This is because the script now runs after the DOM element renders. 这是因为脚本现在在DOM元素渲染之后运行。
<p style="font-size:100px;" id="ya"> hi </p> <script> var y = document.getElementById('ya'); y.style.color = "red"; </script>
解决方案2
1 2016-10-20 04:30:38
Because the javascript was loaded before your p tag. 因为javascript是在您的p标签之前加载的。 If you check the console you will see an error "TypeError: Cannot read property 'style' of null. 如果您检查控制台，则会看到错误“ TypeError：无法读取null的属性'style'。
<!DOCTYPE html> <html> <p style="font-size:100px;" id="ya"> hi </p> <script> var y = document.getElementById('ya'); y.style.color = "red"; </script> </html>
解决方案3
1 2016-10-20 06:14:00
The element id you were trying to find wasn't in the DOM as your script runs before the DOM element renders. 您尝试查找的元素id不在DOM中，因为脚本在DOM元素呈现之前运行。
Your DOM position should come first then Script to manipulate the DOM element. 您的DOM位置应该排在第一位，然后是用于操作DOM元素的脚本。
There are two solution for this problem : 有两个解决此问题的方法：
1. Move your Script below the DOM. 1.将脚本移到DOM下面。
<p style="font-size:100px;" id="ya">
hi
</p>
<script>
var y = document.getElementById('ya');
y.style.color = "red";
</script>
2. use jQuery document.ready() 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>
解决方案4
0 2016-10-20 04:31:21
An Element with id='ya' is undefined at the time you wrote the JavaScript. 编写JavaScript时，未定义id='ya'的元素。 Put the JavaScript in your head and use onload = function(){/* code here */} or addEventListener('load', function(){/* code here */}) and it should work every time (Well maybe not the first way if you have multiple onloads. But there's a way around that by assigning onload to a var then executing after the other onload). 将JavaScript放在您的头上，然后使用onload = function(){/* code here */}或addEventListener('load', function(){/* code here */}) ，它应该每次都可以正常工作（也许不是如果您有多个onload，则第一种方法。但是有一种解决方法，就是将onload分配给var，然后在另一个onload之后执行）。 Really I would use External JavaScript, so it's stored in your Clients cache, this will improve site performance. 确实，我会使用外部JavaScript，因此它将存储在您的客户端缓存中，这将提高网站性能。 Just make sure you change your file name if you update your JavaScript, if your site is deployed, or just clear your cache if your still working on it. 只要确保更新了JavaScript，部署了网站就可以更改文件名，或者如果仍在使用它就清除缓存。
解决方案5
0 2016-10-20 05:32:49
first you can check jQuery.min.js in included in your file your code is fine. 首先，您可以检查文件中包含的jQuery.min.js，您的代码很好。
test this one 测试这个
<script>
var y = document.getElementById('ya');
y.css("color", "red");
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.