素のjavascriptでCSS操作

背景

以前作った
cssのみで立体な球体を表現
目で追従するやつをriotで実装

という記事を合わせれば、光の当たる点を動かせるのかと思い立ったので実装。
ついでに素のjavascriptのみで実装してみました。

結果

こんな感じで実装できました。

See the Pen Movement of shadow of ball by mouse by hashito (@hashito) on CodePen.

内容

基本的にはCSSは「cssのみで立体な球体を表現」の実装と同じです。

// マウスムーブイベント  
document.onmousemove = function (e){  
  // スタイルシートからお探しの定義を検索する関数  
  // c:対象のスタイルシートオブジェクト  
  // tg:対象の文字列  
  var get_syle=(c,tg)=>{  
    return c[Object.keys(c).filter((v)=>{  
      return c[v].selectorText==tg  
    })[0]]  
  };    
  var styleEl = document.querySelector('style'); //　スタイルシートを取得  
  var cssRuleList = styleEl.sheet.cssRules;      //　スタイルシート各種定義を取得  
  var mb=get_syle(cssRuleList,".mi1::before");   //　.mi1::before定義を取得  
  var ma=get_syle(cssRuleList,".mi1::after");    // .mi1::after定義を取得  
  // ２つのポイントから角度を検索  
  var point2angle=(p1,p2)=>{  
    return Math.atan2((p1.y-p2.y),(p1.x-p2.x));   
  }  
  // 角度から点を算出  
  // r:角度  
  // l:中心点からの距離  
  var angle2point=(r,l)=>{  
    return {x:Math.cos(r)*l,y:Math.sin(r)*l};  
  }  
  
  var _k  = point2angle(e,{x:150,y:150});//差を算出  
  var _p  = angle2point(_k,25);//白い点の移動値  
  var _p2 = angle2point(_k,15);//影の移動値  
  //白い点の更新  
  mb.style.top  =37.5+_p.y+"px";  
  mb.style.left =37.5+_p.x+"px";  
  //影の更新  
  ma.style.boxShadow = 'inset '+ _p2.x +'px '+_p2.y+'px 10px 3px #000';  
};  

思ったこと

• box-shadow は style.boxShadowでアクセスする必要がある
• style.boxShadowとかで設定する時に最後に; とかが有るとエラーが起きず更新もされない
• スタイルを検索する関数を作ったけど、他にいいアクセスの方法無いかなぁ…