js 获取css中设置的rem值

用 getComputedStyle 只能取得转化成px的值

阅读 5.7k
2 个回答

取到的是浏览器默认单位,你进行一下换算呗

px/16 = rem

先说思路,得到需要计算属性的px值,然后再得到html标签里的font-size的px值,因为rem是基于html的font-size来的。1rem就是一个font-size的px值。
献上代码:css

*{
    margin: 0;
    padding: 0;
}
html{
    font-size: 20px;
}
#box{
    width: 9rem;
    height: 9rem;
    background-color: red;
}

html

<div id="box"></div>

js

var box = document.getElementById("box");
var boxStyle = window.getComputedStyle(box).width.slice(0,-2);

var html = document.getElementsByTagName("html");
var htmlStyle = window.getComputedStyle(html[0]).fontSize.slice(0,-2);
console.log(boxStyle/htmlStyle + "rem");
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题