2018年09月15日(土)

CSS変数を制御するJavaScriptスニペット

• 0
• 17
• 16
• 46

Result

See the Pen Set CSS Variable with JavaScript by Chris Coyier (@chriscoyier) on CodePen.

CSS変数を更新するJSスニペットです。べんり。

※本コードは非依存のバニラJSです

JavaScript

let root = document.documentElement; root.addEventListener("mousemove", e => { root.style.setProperty('--mouse-x', e.clientX + "px"); root.style.setProperty('--mouse-y', e.clientY + "px"); });

css

.mover { width: 50px; height: 50px; background: red; position: absolute; left: var(--mouse-x); top: var(--mouse-y); }

html

via