此博客链接：https://www.cnblogs.com/ping2yingshi/p/12890443.html
js普通版本
<html> <body> <script> var str1 = "红色"; var str2 = "黑色"; var str3 = "蓝色"; document.write("<p> " + str1.fontcolor("red") +str2.fontcolor("black")+str3.fontcolor("blue")+ "</p>"); </script> </body> </html>
js调用函数版本：
<html> <body> <script> function myFunction(str1,color1,str2,color2,str3,color3){ var str=""; str=str.concat(str1.fontcolor(color1)); str=str.concat(str2.fontcolor(color2)); str=str.concat(str3.fontcolor(color3)); //document.write("<p>"+ str+"</p>"); return str; } document.write(myFunction("红色","red","黑色","black","蓝色","blue")); //var strd=myFunction("红色","red","黑色","black","蓝色","blue") // document.write(strd); </script> </body> </html>
js在运行时传参数版本。
<html> <body> <script> function myFunction(){ var str=""; str=str.concat(arguments[0].fontcolor(arguments[1])); str=str.concat(arguments[2].fontcolor(arguments[3])); str=str.concat(arguments[4].fontcolor(arguments[5])); return str; } //console.log(myFunction("红色","red","黑色","black","蓝色","blue")); </script> </body> </html>
js在运行时传参数函数版本升级
<!DOCTYPE html> <html> <body> <script> function myFunction(){ var len=arguments.length; var str=""; for(var i=1;i<len;i=i+2) { str=str.concat(arguments[i-1].fontcolor(arguments[i])); } return str; } console.log(myFunction("红色","red","黑色","black","蓝色","blue")); </script> </body> </html>
效果图
2.html普通版本
<text style="color:red">红色</text> <text style="color:black">黑色</text> <text style="color:blue">蓝色</text>
html调用函数版本：
<html> <body> <div id="main1"> <p>红色</p> <p>red</p> </div> <div id="main2"> <p>黑色</p> <p>black</p> </div> <div id="main3"> <p>蓝色</p> <p>blue</p> </div> <script> var x=document.getElementById("main1"); var y=x.getElementsByTagName("p"); var m=document.getElementById("main2"); var n=m.getElementsByTagName("p"); var p=document.getElementById("main3"); var q=p.getElementsByTagName("p"); function myFunction(str1,color1,str2,color2,str3,color3){ var str=""; str=str.concat(str1.fontcolor(color1)); str=str.concat(str2.fontcolor(color2)); str=str.concat(str3.fontcolor(color3)); //document.write("<p>"+ str+"</p>"); return str; } document.write( myFunction(y[0].innerHTML,y[1].innerHTML, n[0].innerHTML,n[1].innerHTML,q[0].innerHTML,q[1].innerHTML)); </script> </body> </html>
字符串个数是在运行时才确定的版本
<html> <body> <div id="main1"> <p>红色</p> <p>red</p> </div> <div id="main2"> <p>黑色</p> <p>black</p> </div> <div id="main3"> <p>蓝色</p> <p>blue</p> </div> <script> var x=document.getElementById("main1"); var y=x.getElementsByTagName("p"); var m=document.getElementById("main2"); var n=m.getElementsByTagName("p"); var p=document.getElementById("main3"); var q=p.getElementsByTagName("p"); function myFunction(){ var len=arguments.length; var str=""; for(var i=1;i<len;i=i+2) { str=str.concat(arguments[i-1].fontcolor(arguments[i])); } return str; } console.log( myFunction(y[0].innerHTML,y[1].innerHTML, n[0].innerHTML,n[1].innerHTML,q[0].innerHTML,q[1].innerHTML)); </script> </body> </html>
3.css普通版本
3.1
<html> <body> <view class="redstr">红色</view> <view class="blackstr">黑色</view> <view class="bluestr">蓝色</view> <style> .redstr { color:red; } .blackstr { color:black; } .bluestr { color:blue; } </style> </body> </html>
3.2
<html>
<body>
<div id="main1">
<view style="color:red;">红色</view>
<view style="color:black;">黑色</view>
<view style="color:blue;">蓝色</view>
</div>
</body>
</html>
3.3
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .redstr { color: red; } .blackstr { color: black; } .bluestr { color: blue; } </style> </head> <body> <script> document.write("<font class="redstr">红色</font >"); document.write("<font class="blackstr">黑色</font >"); document.write("<font class="bluestr">蓝色</font >"); </script> </body> </html>
css函数版本
没有修改好的版本：
<html> <body> <div id="main1"> <p class="redstr">红色</p> </div> <div id="main2"> <p class="blackstr">黑色</p> </div> <div id="main3"> <p class="bluestr">蓝色</p> </div> <script> var x=document.getElementById("main1"); var y=x.getElementsByTagName("p"); var m=document.getElementById("main2"); var n=m.getElementsByTagName("p"); var p=document.getElementById("main3"); var q=p.getElementsByTagName("p"); var a=document.getElementById("redstr"); var b=a.getElementsByTagName("p"); var c=document.getElementById("blackstr"); var d=c.getElementsByTagName("p"); var e=document.getElementById("bluestr"); var f=e.getElementsByTagName("p"); function myFunction(str1,color1,str2,color2,str3,color3){ var str=""; str=str.concat(str1.fontcolor(color1)); str=str.concat(str2.fontcolor(color2)); str=str.concat(str3.fontcolor(color3)); //document.write("<p>"+ str+"</p>"); return str; } var x = document.getElementById('redstr'); document.write( myFunction(y[0].innerHTML,b[0].innerHTML, n[0].innerHTML,d[0].innerHTML,q[0].innerHTML,f[0].innerHTML)); </script> <style> .redstr { color:red; } .blackstr { color:black; } .bluestr { color:blue; } </style> </body> </html>
使用style版本：
<!DOCTYPE html> <html> <body> <div id="main1"> <p class="redstr" style="color:red;">红色</p> </div> <div id="main2"> <p class="blackstr" style="color:black;">黑色</p> </div> <div id="main3"> <p class="bluestr" style="color:blue;">蓝色</p> </div> <script> var x=document.getElementById("main1"); var y=x.getElementsByTagName("p"); var m=document.getElementById("main2"); var n=m.getElementsByTagName("p"); var p=document.getElementById("main3"); var q=p.getElementsByTagName("p"); var a=document.getElementsByClassName("redstr")[0]; var b=document.getElementsByClassName("blackstr")[0]; var c=document.getElementsByClassName("bluestr")[0]; function myFunction(str1,color1,str2,color2,str3,color3) { var str=""; str=str.concat(str1.fontcolor(color1)); str=str.concat(str2.fontcolor(color2)); str=str.concat(str3.fontcolor(color3)); return str; } document.write( myFunction(y[0].innerHTML,a.style.color,n[0].innerHTML,b.style.color,q[0].innerHTML,c.style.color)); </script> </body> </html>
无函数返回值版本：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #redstr { color: red; } #blackstr { color: black; } #bluestr { color: blue; } </style> </head> <body> <h1 id="redstr" >红色</h1> <h1 id="blackstr" >黑色</h1> <h1 id="bluestr" >蓝色</h1> <script> var str1="红色"; var str2="黑色"; var str3="蓝色"; var x= document.getElementById("redstr"); var color1 = document.defaultView.getComputedStyle(x,null).color; var y= document.getElementById("blackstr"); var color2 = document.defaultView.getComputedStyle(y,null).color; var z= document.getElementById("bluestr"); var color3 = document.defaultView.getComputedStyle(z,null).color; function myFunction(str1,color1,str2,color2,str3,color3) { document.write('<font style="color:'+color1+'">'+str1+'</font >'); document.write('<font style="color:'+color2+'">'+str2+'</font>'); document.write('<font style="color:'+color3+'">'+str3+'</font >'); } myFunction(str1,color1,str2,color2,str3,color3); </script> </body> </html>
css版本：
注意：这种方法需要需要把rgb颜色值转换成十六进制颜色值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #redstr { color: red; } #blackstr { color: black; } #bluestr { color: blue; } </style> </head> <body> <h1 id="redstr" >红色</h1> <h1 id="blackstr" >黑色</h1> <h1 id="bluestr" >蓝色</h1> <script> // var str1="红色"; // var str2="黑色"; // var str3="蓝色"; var x= document.getElementById("redstr"); var color4 = document.defaultView.getComputedStyle(x,null).color; var y= document.getElementById("blackstr"); var color5 = document.defaultView.getComputedStyle(y,null).color; var z= document.getElementById("bluestr"); var color6 = document.defaultView.getComputedStyle(z,null).color; function transferRgbToStr(color) { if (typeof color !== 'string' && !(color instanceof String) || !~color.indexOf('rgb')) return console.error("请输入rgb形式的颜色值"); color = color.replace(/s+/g, ''); var index = color.indexOf('(') + 1; //注意： String 的slice方法，slice方法参数为负数时，即为倒数 // substring 方法参数为负数时，全都认为是0 var colors = color.slice(index, -1).split(',').slice(0, 3); for (var i = 0; i < colors.length; i++) { if (parseInt(colors[i], 10) > 255 || parseInt(colors[i], 10) < 0) return console.error("颜色值范围在0到255之间，请注意输入值！") colors[i] = parseInt(colors[i], 10).toString(16); if (colors[i].length === 1) { colors[i] = "0" + colors[i] } } return colors.join(""); } var color1=transferRgbToStr(color4); var color2=transferRgbToStr(color5); var color3=transferRgbToStr(color6); function myFunction(str1,color1,str2,color2,str3,color3) { var str=""; str=str.concat(str1.fontcolor(color1)); str=str.concat(str2.fontcolor(color2)); str=str.concat(str3.fontcolor(color3)); return str; } document.write(myFunction(x.innerHTML,color1,y.innerHTML,color2,z.innerHTML,color3)); </script> </body> </html>
css版本，函数参数时在运行时才确定的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #redstr { color: red; } #blackstr { color: black; } #bluestr { color: blue; } </style> </head> <body> <h1 id="redstr" >红色</h1> <h1 id="blackstr" >黑色</h1> <h1 id="bluestr" >蓝色</h1> <script> // var str1="红色"; // var str2="黑色"; // var str3="蓝色"; var x= document.getElementById("redstr"); var color4 = document.defaultView.getComputedStyle(x,null).color; var y= document.getElementById("blackstr"); var color5 = document.defaultView.getComputedStyle(y,null).color; var z= document.getElementById("bluestr"); var color6 = document.defaultView.getComputedStyle(z,null).color; function transferRgbToStr(color) { if (typeof color !== 'string' && !(color instanceof String) || !~color.indexOf('rgb')) return console.error("请输入rgb形式的颜色值"); color = color.replace(/s+/g, ''); var index = color.indexOf('(') + 1; //注意： String 的slice方法，slice方法参数为负数时，即为倒数 // substring 方法参数为负数时，全都认为是0 var colors = color.slice(index, -1).split(',').slice(0, 3); for (var i = 0; i < colors.length; i++) { if (parseInt(colors[i], 10) > 255 || parseInt(colors[i], 10) < 0) return console.error("颜色值范围在0到255之间，请注意输入值！") colors[i] = parseInt(colors[i], 10).toString(16); if (colors[i].length === 1) { colors[i] = "0" + colors[i] } } return colors.join(""); } var color1=transferRgbToStr(color4); var color2=transferRgbToStr(color5); var color3=transferRgbToStr(color6); function myFunction() { var len=arguments.length; var str=""; for(var i=1;i<len;i=i+2) { str=str.concat(arguments[i-1].fontcolor(arguments[i])); } return str; } document.write(myFunction(x.innerHTML,color1,y.innerHTML,color2,z.innerHTML,color3)); </script> </body> </html>