Why is it invalid for JS to modify the box-shadow property?
I try to use CSS to make pixel pictures. Considering that there will be many icons, I use an object called BitmapValue to store pixel data, and then write a function called PaintBitmap to set icons for specified elements, but to no avail.
.bm /* Bitmap */
{
position: relative;
width: 20px;
height: 20px;
background-color: transparent;
top: -20px;
left: -20px;
}var BitmapValue=
{
"test":[ // test
[0,0,1,0,0],
[0,1,0,1,0],
[1,0,1,0,1],
[0,1,0,1,0],
[0,0,1,0,0]]
// 0 -sharpd0e4fe 1
}
function PaintBitmap(id,name)
{
let $i=document.getElementById(id);
$i.className="bm";
let s="",v=BitmapValue[name];
Log("BitmapValue of \""+name+"\": "+v);
for(let i=0;i<5;iPP)
{
for(let j=0;j<5;jPP)
{
s+=((i+1)*20).toString()+"px "+((j+1)*20).toString()+"px "+(v[i][j]?"green":"-sharpd0e4fe")+(i==4&&j==4?";":", ");
}
}
console.log("s1: "+s); //
$i.style.boxShadow=s;
console.log("s2: "+$i.style.boxShadow); // boxShadow
}then I read about other people"s experiences and wrote on the console:
document.getElementById("xxx"/* id */).cssText="box-shadow: 20px 20px -sharpd0e4fe, 20px 40px -sharpd0e4fe, 20px 60px green, 20px 80px -sharpd0e4fe, 20px 100px -sharpd0e4fe, 40px 20px -sharpd0e4fe, 40px 40px green, 40px 60px -sharpd0e4fe, 40px 80px green, 40px 100px -sharpd0e4fe, 60px 20px green, 60px 40px -sharpd0e4fe, 60px 60px green, 60px 80px -sharpd0e4fe, 60px 100px green, 80px 20px -sharpd0e4fe, 80px 40px green, 80px 60px -sharpd0e4fe, 80px 80px green, 80px 100px -sharpd0e4fe, 100px 20px -sharpd0e4fe, 100px 40px -sharpd0e4fe, 100px 60px green, 100px 80px -sharpd0e4fe, 100px 100px -sharpd0e4fe;" the result is correct!
the effect is as follows:
help content: why not use cssText to achieve the desired results? And the principle?
Thank you very much!