使用JS更改CSS样式中的baragraph的backgroundColor [英] change backgroundColor of a baragraph in CSS Style using JS
问题描述
嗨evereyone
我想在网页上顺利地改变一个Paraghraph的backgroundColor的Hue页面加载
- >所以我们有一个矩形，可以顺畅地循环通过所有ColorWheel颜色
这是我正在使用的代码但没有结果
--------------------------------------------- -
Hi evereyone
I want to smoothly change Hue of backgroundColor of a Paraghraph in a WebPage at page Load
--> So we have a rectangle that smoothly cycle's through all ColorWheel Colors
Here is the code I'm Using But No reasults
----------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(150, 100%, 80%);}
</style>
</head>
<body>
<p>HSL colors:</p>
<p id="p1">
<br>
<br>
AAAAAAAAAA
<br>
<br>
</p>
<script>
var a = 0;
var c1;
var x = document.getElementById("p1");
</script>
<script>
setInterval(function () {abc()}, 50);
function abc()
{
a = a + 1;
if ( a < 360)
{
a = 0;
}
c1="hsl(a, 100%, 80%)";
x.style.backgroundColor = c1;
}
</script>
</body>
</html>
------------------------------ ----------------
----------------------------------------------
推荐答案
不需要Javascript - 你可以用纯CSS做到这一点：
No need for Javascript - you can do this in pure CSS:
\#p1
{
background-color:hsl(150, 100%, 80%);
animation: color-change 18s infinite;
}
@keyframes color-change
{
0% { background-color: hsl(0, 100%, 80%); }
50% { background-color: hsl(180, 100%, 80%); }
100% { background-color: hsl(360, 100%, 80%); }
}
http://jsfiddle.net/8kfw0v42/ [ ^ ]
您可能需要一些供应商前缀来支持旧浏览器 - 此工具 [ ^ ]将为您生成它们。
在＃p1 前面忽略 \ - 这是只是为了阻止该网站的代码尝试将其转换为< h1> 标记！
http://jsfiddle.net/8kfw0v42/[^]
You might need some vendor prefixes to support older browsers - this tool[^] will generate them for you.
Ignore the \ in front of the #p1 - it's just there to stop this site's code from trying to turn it into an <h1> tag!
这篇关于使用JS更改CSS样式中的baragraph的backgroundColor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
