如何在纯javascript中获取css属性值答案

【问题标题】：How to get css property value in pure javascript如何在纯javascript中获取css属性值
【发布时间】：2016-03-26 12:22:57
【问题描述】：

我想以百分比形式获取元素的宽度。我正在使用以下函数来获取样式，但它以像素为单位给出值。这里的变量样式可以是任何 CSS 属性，如宽度、高度等。

this.getStyle = function(style) {
    var elementStyle = window.getComputedStyle(that.element);
    var value = elementName.getPropertyValue(style);
    return value;
}

【问题讨论】：

如何设置宽度？
如何使用父元素的像素宽度值手动计算百分比？
我已将宽度设置为 'width: 100%'
可能重复：stackoverflow.com/questions/9730612/…

标签： javascript html css

【解决方案1】：

看来你在找

that.element.style.width
that.element.style.height
etc

【讨论】：

只有当css 是内联样式时它才有效，例如：<div style="width:60%">test</div>
@MoshFeu 即使没有在最新的 Firefox 和 Chromium 中内联定义 CSS（使用 Firefox 56 和 Chromium 62 测试），它也可以工作。但我认为这取决于 CSS 属性，例如在使用 CSS 样式表时，我可以通过 element.style 访问宽度和高度，但不能访问边框属性：stackoverflow.com/questions/10675885/…

【解决方案2】：

你有没有尝试过这样的事情：

var width = (100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';

【讨论】：

你是怎么用纯javascript写这个的？
原海报要求纯 JavaScript，但这是 jQuery 代码，没有解释。

【解决方案3】：

我认为你总是得到像素，而不是 % 宽度。原因是在对象渲染时，它总是根据我们给出的百分比设置物理宽度，你可以通过 dom 来验证。 Javascript 使用 DOM(Document Object Model)，而 jQuery 你可以使用 Dom 以及通过 document.getready() 加载属性之前。

所以如上所述，您可以获得属性，但以像素为单位。

document.getElementById('yourdivname').element.style.width

或

div2 = document.getElementById('div2');
alert("Width of div2 with style = " + div2.style.width);

Getting the width of an html element in percent % with jQuery

这很有趣：

$(document).ready 是在 HTML 之后触发的 jQuery 事件文档已加载 vs onload 是一个内置的 DOM 事件加载完所有内容后触发。所以准备好的事件会通常在 onload 事件之前触发，允许代码执行尽可能早，而不必等待所有资产全部完成加载完毕

更多详情：- 点击link。

【讨论】：