Javascript 获取设置时的元素CSS属性（宽度/高度）值（百分比/em/px/etc）

当使用CSS规则设置元素CSS属性时，如何获得该属性（例如宽度/高度），以任何单位设置（例如百分比/em/px）？（在谷歌浏览器中，最好是无框架的）

使用

getComputedStyle

以像素为单位返回当前值，jQuery中的

css（）

也是如此

例如：

<div class="b">first</div>
<div id="a" class="a">second</div>

<style>
     div      { width: 100px; }
     x, div#a { width: 50%;   }
     .a       { width: 75%;   }
</style>

首先
第二
div{width:100px；}
x、 div#a{宽度：50%；}
.a{宽度：75%；}

在本例中迭代所有

div

元素时，我希望能够将第二个

div

s宽度设置为

50%

（第一个设置为

100px

）

---

Chrome元素检查器可以在设置CSS属性值时显示这些属性值，因此在Chrome中应该可以这样做

---

---

不是链接问题的精确副本，因为有公认的答案，有一个简单的技巧，无论设置何种宽度，都会产生一个百分比宽度。对于其余部分，您必须知道用于创建活动规则的选择器？人们怎么会知道呢？

显然没有用于此的DOM API

编辑：哦，刚刚意识到这是为谷歌浏览器标记的

---

尝试window.getMatchedCSSRules（）

它并不像调用WebKits那样简单，它确实会按优先级顺序返回匹配的规则（尽管我在文档中没有提到这个顺序），但顺序不考虑属性重要的优先级，也不包括元素样式。所以我最终得到了这个函数：

getMatchedStyle 例子 给定以下代码和样式规则：

<div class="b">div 1</div>
<div id="a" class="a d2">div 2</div>
<div id="b" class="b d3" style="width: 333px;">div 3</div>
<div id="c" class="c d4" style="width: 44em;">div 4</div>

<style>
div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%;   }
div#c.c  { width: 444px; }
x, div.a { width: 50%;   }
.a       { width: 75%;   }
</style>

---

（）

有一篇新的复文，上面有一个很好的答案。这个答案是针对jQuery的，但它很容易实现

---

各位好消息！在w3c草案中，似乎有一条路要走

快速阅读本文档，似乎本规范的目标可能是规范，旨在简化从javascript访问CSSOM值的过程

对于我们来说，这里真正重要的部分是我们将有一个API，它将能够将CSS值解析为表单的对象

并向元素接口添加一个方法，从中我们将能够获得实际应用于元素的值

截至今日（66年起）

（（）=>{
if（！Element.prototype.computedStyleMap）{
错误（“您的浏览器不支持CSS类型的OM”）；
返回；
}
document.querySelectorAll（'.test'）
.forEach（（elem）=>{
设styleMap=elem.computedStyleMap（）；
const unitvalue=styleMap.get（'width'）；
控制台日志（elem{
类型：unitvalue.type（），
单位：unitvalue.unit，
值：unitvalue.value
});
});
/*输出
首先{
“类型”：{
“长度”：1
},
“单位”：“px”，
“价值”：100
}
第二{
“类型”：{
“百分比”：1
},
“单位”：“百分比”，
“价值”：50
}
*/
})();
div.test{width:100px；}
x、 div#a{宽度：50%；}
.a{宽度：75%；}
首先
其次
我很惊讶没有看到这个答案，因此：您可以通过自己查看样式表并获取与元素匹配的规则的信息来实现

下面是一个示例的大致示意图，使用该库计算选择器特异性
getComputedStyle
将以像素而不是原始单位告诉您这些大小


函数applyStyles（目标、样式、特性、appliedSpecs）{
//循环浏览它的样式
for（让Object.entries的[key，value]（样式））{
//跳过为我们提供属性名称的数字索引
如果（/^\d+$/.test（键））{
继续；
}
如果（值！==“”）{
//非空白样式。如果有！重要，请添加特殊性。
让这个规范=特异性；
if（style.getPropertyPriority（键）=“重要”）{
//重要的规则，因此请使用第一个值（当前为0）
//用于样式表样式，1用于内联样式
thisSpec=[特异性[0]+1，…特异性切片（1）]；
}
//非空白样式，我们已经有样式了吗？如果有，有
//什么特殊性？
const currentSpec=appliedSpecs[key]；
如果（！currentSpec | | Specification.compare（thisSpec，currentSpec）>=0）{
//要么我们没有这种款式，要么就是这种新的
//具有相同或更高的特异性并覆盖它。
目标[键]=值；
appliedSpecs[键]=此规范；
}
}
}
}
函数getDeclaredStyle（el）{
//要用样式填充的对象
常量样式={}；
//用于记住设置样式的选择器的特定性的对象
常量appliedSpecs={}；
//按顺序在纸上打圈
for（数组的常量表from（el.ownerDocument.styleSheets））{
//循环浏览规则
常量规则=sheet.cssRules | | sheet.rules；
国际单项体育联合会（规则）{
for（数组的常量规则。from（规则））{
const{selectorText}=规则；
如果（selectorText&&el.matches（selectorText））{
//这条规则与我们的元素相匹配
if（rule.style）{
//获取此规则的特定性
常量特异性=特异性。计算（selectorText）[0]。特异性数组；
//应用这些样式
applyStyles（样式、规则、样式、特殊性、appliedSpecs）；
}
}
}
}
}
//应用内联样式
applyStyles（样式，el.style，[0,255,255,255]，appliedSpecs）；
回归风格；
}
//获取元素
const el=document.querySelector（“div.a
<div class="b">div 1</div>
<div id="a" class="a d2">div 2</div>
<div id="b" class="b d3" style="width: 333px;">div 3</div>
<div id="c" class="c d4" style="width: 44em;">div 4</div>

<style>
div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%;   }
div#c.c  { width: 444px; }
x, div.a { width: 50%;   }
.a       { width: 75%;   }
</style>

var d = document.querySelectorAll('div');

for(var i = 0; i < d.length; ++i){
    console.log("div " + (i+1) + ":  " + getMatchedStyle(d[i], 'width'));
}

div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

function getDefaultStyle(element, prop) {
    var parent = element.parentNode,
        computedStyle = getComputedStyle(element),
        value;
    parent.style.display = 'none';
    value = computedStyle.getPropertyValue(prop);
    parent.style.removeProperty('display');
    return value;
}

{
  value: 100,
  unit: "percent", // | "px" | "em" ...
  type: "percent"  // | "length"
}