js獲取CSS/SCSS/LESS的常量

<template><div id="body"><p>--color: {{ color }}</p><p>--width: {{ width }}</p><p>--color_after: {{ color_after }}</p><p>--width_after: {{ width_after }}</p></div>
</template><script>
export default {data() {return { color: "", width: "", color_after: "", width_after: "" };},mounted() {var el = document.querySelector("#body");// 知識點：document.defaultView===window----------------------------------------var style = window.getComputedStyle(el) || document.defaultView.getComputedStyle(el); //js獲取div樣式this.color = style.getPropertyValue("--color");this.width = style.getPropertyValue("--width");var style_after = window.getComputedStyle(el, ":after") || document.defaultView.getComputedStyle(el, ":after"); //js獲取偽類樣式this.color_after = style_after.getPropertyValue("--color-after");this.width_after = style_after.getPropertyValue("--width-after");},
};
</script>
<style lang="scss" scoped>
#body {--color: red;--width: 100px;&:after {--color-after: blue;--width-after: 200px;}
}
</style>

打印效果?

CSS/SCSS/LESS獲取js的值（js主動推送參數給CSS使用）

<template><div id="body">如何通過js傳輸常量給css，共用js的常量值</div>
</template><script>
export default {mounted() {var el = document.querySelector("#body");el.style.setProperty("--color", "white"); //js往css傳遞參數el.style.setProperty("--background-color", "red"); //js往css傳遞參數},
};
</script>
<style lang="scss" scoped>
#body {color: var(--color);background-color: var(--background-color);
}
</style>

打印效果?

總結

以上是生活随笔為你收集整理的【实现js和css互通、共享常量参数值】js如何获取CSS/SCSS/LESS的常量、CSS/SCSS/LESS又是如何获取js的值（或者说js是如何主动推送参数给CSS使用的）？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。