未通过Javascript正确设置颜色
根据一位用户的建议,我决定重做我的问题 我试图做的是在不使用样式表的情况下更改几个元素的前景色和背景色 在脚本标记下的每个colorit调用旁边是我试图重现Javascript风格的样式。这是因为我的样式表太大,占用了我网站代码的1/2以上,尤其是那些背景色声明 这是我的新代码:未通过Javascript正确设置颜色,javascript,html,css,colors,internet-explorer-7,Javascript,Html,Css,Colors,Internet Explorer 7,根据一位用户的建议,我决定重做我的问题 我试图做的是在不使用样式表的情况下更改几个元素的前景色和背景色 在脚本标记下的每个colorit调用旁边是我试图重现Javascript风格的样式。这是因为我的样式表太大,占用了我网站代码的1/2以上,尤其是那些背景色声明 这是我的新代码: <table> <tr> <td ID="CELL"> GREENonYELLOW <p>BLUEonRED<i>REDo
<table>
<tr>
<td ID="CELL">
GREENonYELLOW
<p>BLUEonRED<i>REDonGREEN<b>YELLOWonBLUE</b>REDonGREEN</i>BLUEonRED</p>
<p>BLUEonRED<i>REDonGREEN<b>YELLOWonBLUE</b>REDonGREEN</i>BLUEonRED</p>
GREENonYELLOW
</td>
</tr>
</table>
<script>
colorIt('CELL','','#FF0','#0F0'); //#CELL {background:#F00;color:#0F0}
colorIt('CELL','P','#F00','#00F'); //#CELL P{background:#00F;color:#F00}
colorIt('CELL','P I','#0F0','#F00'); //#CELL P I{background:#F00;color:#0F0}
colorIt('CELL','P I B','#00F','#FF0'); //#CELL P I B{background:#FF0;color:#00F}
//populate array with pointers as parents to the children are found
function getKidValues(parent,children){
var allKids=[],childrenSet=document.getElementsByTagName(children);
childrenSetSize=childrenSet.length;
for(kidsIndex=0;kidsIndex < childrenSetSize;kidsIndex++){
if(childrenSet[kidsIndex].parentNode==parent){
allKids.push(childrenSet[kidsIndex])
}
}
return allKids;
}
function colorIt(parent,kids,backgroundColor,foregroundColor){
if(parent){
parentPtr=document.getElementById(parent);
if(kids){
kidSet=kids.split(' ');
kidSetSize=kids.length;
for (index=0;index < kidSetSize;index++){
//get proper kids. I think I need to pass new parameters but idk which??
currentKids=getKidValues(parentPtr,kidSet[index]);
//go through the kids setting the colors.
for (thisKidIndex in currentKids){
setColor(currentKids[thisKidIndex],backgroundColor,foregroundColor);
}
}
}
}
}
//just sets color of element: This function isn't problematic.
function setColor(item,back,fore){
if(item){
item=item.style;
if(item){
if(back){item.backgroundColor=back}
if(fore){item.color=fore}
}
}
}
</script>
绿黄蜂
BLUEonREDREDonGREENYELLOWonBLUEREDonGREENBLUEonRED
BLUEonREDREDonGREENYELLOWonBLUEREDonGREENBLUEonRED
绿黄蜂
彩色(“单元格”、“FF0”、“0F0”)//#单元格{背景:#F00;颜色:#0F0}
彩色('CELL','P','F00','00F')//#单元格P{背景:#00F;颜色:#F00}
彩色('CELL','pi','0F0','F00')//#单元格pi{背景:#F00;颜色:#0F0}
彩色('CELL','PIB','00F','FF0')//#单元PIB{背景:#FF0;颜色:#00F}
//用指针填充数组,作为找到子对象的父对象
函数getKidValues(父级、子级){
var allKids=[],childrenSet=document.getElementsByTagName(children);
childrenSetSize=childrenSet.length;
对于(kidsIndex=0;kidsIndex
我觉得我需要添加递归来解决这个问题,但是如果有另一种方法可以解决这个问题,而不需要杀死计算机处理器,并且可以在InternetExplorer7中工作,那么我期待着这个答案
到目前为止,这个javascript只能正确地满足ColorIt函数的一个子函数,它不能与多个子函数一起工作
我能做些什么来解决这个问题
更新
我将javascript代码更改为:
function setValues(parent,children,depth,b,f){
var childrenSet=document.getElementsByTagName(children[depth]),childrenSetSize=childrenSet.length;
for(kidsIndex=0;kidsIndex < childrenSetSize;kidsIndex++){
var m=childrenSet[kidsIndex];
if(m.parentNode==parent){
if ((depth+1) < children.length){
setValues(m,children,depth+1,b,f);
}else{
setColor(m,b,f);
}
}
}
}
function colorIt(parent,kids,backgroundColor,foregroundColor){
if(parent){
parentPtr=document.getElementById(parent);
if(kids){
kidSet=kids.split(' ');
setValues(parentPtr,kidSet,0,backgroundColor,foregroundColor);
}
}
}
function setColor(item,back,fore){
if(item){
item=item.style;
if(item){
if(back){item.backgroundColor=back}
if(fore){item.color=fore}
}
}
}
函数设置值(父、子、深度、b、f){
var childrenSet=document.getElementsByTagName(children[depth]),childrenSetSize=childrenSet.length;
对于(kidsIndex=0;kidsIndex
一切正常,但只有第一行文字受到影响。我希望两条线是相同的方式,而不是一个只是一种颜色。记住,我正试图重写一些CSS。请参见上文。Internet Explorer 7???为什么?因为我在用adsense赚钱,而且根据我的服务器日志,一些人正在使用旧的浏览器,比如IE7甚至IE6。