浏览器css动态赋值及宽高度计算

最新推荐文章于 2024-09-04 14:00:00 发布

DW_DJF

最新推荐文章于 2024-09-04 14:00:00 发布

阅读量1.1k

点赞数

分类专栏： JS 文章标签： css

本文链接：https://blog.csdn.net/weixin_43602502/article/details/108323078

版权

JS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

  created() {
    window.addEventListener("resize", ()=>{
        document.body.style.setProperty(
        "--innerWidth",
        window.innerWidth - 158 + "px"
      );
    });
    this.getHeight();
  },
  
  <style lang="scss" scoped>
    #bigTabs {
        width: var(--innerWidth);
    }
  </style>
//   css动态赋值
document.getElementById("idName").style.marginLeft='20px'

------------------------------------------------------------

// 1.添加window 的resize事件监听
window.addEventListener('resize',onWindowResize);
// 2.
window.onresize = onWindowResize;
// 上面两种方法都可以使用
// 浏览器窗口变动触发的方法
function onWindowResize() {
    // 重新设置宽高比例
    width/height = window.innerWidth / window.innerHeight;
}