测试代码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title>fontsize()fontcolor()</title>
<style id="FirstStyleTag">
#Contain010>div,#Contain010{border:1px solid black;}
</style><script>function dgebi(x){if(x && x.constructor===String)x=document.getElementById(x); return x;} ; function dcept(p,tn){var e=document.createElement(tn); p=dgebi(p).appendChild(e); return e;} ; const FirstStyleTag=dgebi("FirstStyleTag");
var str="Hello Word", str1=str.fontsize(7), str2=str.fontcolor("#00ff99"), str3=str1.fontcolor("#00ff99");
</script></head><body style="margin:0; font-size:16px; "><header id="BodyHeader"></header><div id="BodyBody">
<h2>fontsize fontcolor 均小写 , 返回新字符串, 不改变原字符串</h2>
<h2>fontsize( 参数必须是从 1 至 7 的数字); fontcolor(该值必须是颜色名(red)、RGB 值(rgb(255,0,0))或者十六进制数(#FF0000));</h2>
<fieldset id="Contain010">
<legend>以下div都设置了内联style</legend>
<div id="div010">用innerText 可以看到实质是套了font标签
<div style=""></div>
<div style="color:red; font-size:10px;"></div>
<div style="color:blue; font-size:15px;"></div>
<div style="color:black; font-size:20px;"></div>
<div style="color:#0099ff; font-size:25px;"></div>
</div>
<div id="div020">用innerHTML 内联style失效
<div style=""></div>
<div style="color:red; font-size:10px;"></div>
<div style="color:blue; font-size:15px;"></div>
<div style="color:black; font-size:20px;"></div>
<div style="color:#0099ff; font-size:25px;"></div>
</div>
</fieldset>
</div><footer id="BodyFooter"></footer><style id="LastStyleTag"></style><script>const BodyHeader=dgebi("BodyHeader") , BodyBody=dgebi("BodyBody") , BodyFooter=dgebi("BodyFooter") , LastStyleTag=dgebi("LastStyleTag") , LastStyleSheet=LastStyleTag.sheet;
for(let e of dgebi("div010").children){ if(e.constructor===HTMLDivElement)e.innerText=str3; }
for(let e of dgebi("div020").children){ if(e.constructor===HTMLDivElement)e.innerHTML=str3; }
</script></body></html>
结果截图
总结
fontsize fontcolor 均小写 , 返回新字符串, 不改变原字符串
fontsize( 参数必须是从 1 至 7 的数字);
fontcolor(该值必须是颜色名(red)、RGB 值(rgb(255,0,0))或者十六进制数(#FF0000));