时间戳

首页 > 解决方案 > 获取元素的css定义

javascript - 获取元素的css定义

问题描述

有没有快速检索width元素的 CSS 定义（或任何其他 CSS 属性）的方法？

笔记

  1. 我需要知道实际定义，例如80%or 42vw，而不是计算的像素尺寸。
  2. 宽度可以在不同的 CSS 选择器上设置，如下面的代码所示

这是我拥有的标记/ CSS 示例：

body div > section { 
    width: 30% 
}
#content section { 
    width: auto 
}
first { 
    width: 75% !important
}

<body>
  <div id="content">
    <section class="first"> ... </section>
  </div>
</body>

问题：我想通过 JS 找出<section>宽度为75%.

不幸的是，getMatchedCSSRules()这正是我所需要的，但它已被弃用并已从浏览器中删除。

标签： javascriptcss

解决方案

我想你正在寻找这个。您需要用百分比转换。

$(window).on("load", function(){
  var f = $("section").width() / $("section").parent().width() * 100;
  
  console.log(f+"%");
});
body div > section { 
    width: 30%;
}
#content section { 
    width: auto; 
}
.first { 
    width: 75% !important;
    border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
    <section class="first"> ... </section>
  </div>

推荐阅读