如何从js中获取元素的颜色并改变?
先贴上代码:<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><t...
先贴上代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>我的星空</title>
<style type="text/css">
div {
position: absolute;
font-size: 35px;
color: yellow;
}
</style>
<script type="text/javascript">
function explorer() {
var stars = document.getElementsByTagName("div");
var count = 0;
for (var i = 0; i < stars.length; i++) {
stars[i].style.top = Math.random() * 500;
stars[i].style.left = Math.random() * 1000;
/*if (count % 2 == 0) {
stars[i].style.color = #white;
} else {
stars[i].style.color = #ff0;
}*/
}
count++;
window.setTimeout("explorer()", 1000);
}
</script>
<link rel="stylesheet" type="text/css" href="" />
</head>
<body bgcolor="black" onload="explorer()">
<div>★</div>
</body>
</html>
我想让星星每一秒换一次位置,并且换颜色。
以上代码此时可以换位置,但是如果取消注释,不进颜色不能换,连位置也不变了。
这是怎么回事?
是if的问题吗?怎么改才好呢?
大神们帮帮忙吧!小弟这里先谢谢了! 展开
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>我的星空</title>
<style type="text/css">
div {
position: absolute;
font-size: 35px;
color: yellow;
}
</style>
<script type="text/javascript">
function explorer() {
var stars = document.getElementsByTagName("div");
var count = 0;
for (var i = 0; i < stars.length; i++) {
stars[i].style.top = Math.random() * 500;
stars[i].style.left = Math.random() * 1000;
/*if (count % 2 == 0) {
stars[i].style.color = #white;
} else {
stars[i].style.color = #ff0;
}*/
}
count++;
window.setTimeout("explorer()", 1000);
}
</script>
<link rel="stylesheet" type="text/css" href="" />
</head>
<body bgcolor="black" onload="explorer()">
<div>★</div>
</body>
</html>
我想让星星每一秒换一次位置,并且换颜色。
以上代码此时可以换位置,但是如果取消注释,不进颜色不能换,连位置也不变了。
这是怎么回事?
是if的问题吗?怎么改才好呢?
大神们帮帮忙吧!小弟这里先谢谢了! 展开
推荐于2017-09-17 · 知道合伙人互联网行家
关注
展开全部
1、这个函数来自Rico,Longbill及Dnew.cn修改。
2、说明: 传入参数一个,为元素的id值或元素本身,返回为元素的真实背景色值(字符串)。背景值均为16进制的值(原代码是是IE里面返回的是16进制的值,而Mozilla则是rgb值,Dnew.cn将其修改为均返回16进制的值)。
3、代码如下:
<html>
<head>
<title>得到元素真实的背景颜色</title>
<style>
.classname {background-color:#ff99dd;}
#div3 {background-color:#d8bfd8;}
div {background-color:#87cefa;border:1px solid #333333;margin:10px;padding:4px;}
body {background-color:#bed742;}
#div4 {background-color:transparent;}
</style>
</head>
<body>
<span style="text-align:center;font-size:20px;color:#ff7f50;width:100%;">得到元素真实的背景颜色 <font style="font-size:12px;">By <a href=
<div id='div1'>div1 直接通过div标签定义背景色(#87cefa)</div>
<div id='div2' class=classname>div2 通过class name定义背景色(#ff99dd)</div>
<div id='div3'>div3 通过id定义背景色(#d8bfd8)</div>
<div id='div4'>div4 这是一个透明的div,背景色应为上一个元素的颜色(#bed742)</div>
<button onclick="go()">getBg()</button>
<script>
function getBg(element)
{//author: Longbill (
)
//dnew.cn修补
var rgbToHex=function(rgbarray,array){
if (rgbarray.length < 3) return false;
if (rgbarray.length == 4 && rgbarray[3] == 0 && !array) return 'transparent';
var hex = [];
for (var i = 0; i < 3; i++){
var bit = (rgbarray[i] - 0).toString(16);
hex.push((bit.length == 1) ? '0' + bit : bit);
}
return array ? hex : '#' + hex.join('');
}
//---------------
if (typeof element == "string") element = document.getElementById(element);
if (!element) return;
cssProperty = "backgroundColor";
mozillaEquivalentCSS = "background-color";
if (element.currentStyle)
var actualColor = element.currentStyle[cssProperty];
else
{
var cs = document.defaultView.getComputedStyle(element, null);
var actualColor = cs.getPropertyValue(mozillaEquivalentCSS).match(/\d{1,3}/g);
//-----
actualColor = (actualColor) ? rgbToHex(actualColor) : "transparent";
}
if (actualColor == "transparent" && element.parentNode)
return arguments.callee(element.parentNode);
if (actualColor == null)
return "#ffffff";
else
return actualColor;
}
function go()
{
for(var i=1;i<=4;i++) eval("alert('div"+i+":'+getBg('div"+i+"'));");
}
</script>
</body>
</html>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询