Question

我们如何使用JavaScript获取声明的CSS值的值（就像使用Chrome的检查器检查元素时显示的值一样？我尝试在网上搜索的所有东西似乎只想要给出计算值。

对于我的具体用例，我想知道CSS转换结束时的宽度是什么，它在样式表中设置，而不是内联。当我使用JavaScript检查宽度时，我得到计算的宽度，在脚本中检索时是在转换的开始，因此向我显示Ptr，即使在300ms内它将是声明的宽度比如0。

Answer 1

看看transitionend event。它可以用于你的用例吗？

修改

由于这个答案得到了回复，我正在粘贴下面的一些代码。

element.addEventListener("transitionend", function() { // get CSS property here }, false);

Answer 2

我认为这就是你之后的事情：

＆＃13;

$('#widen').on('click', function(e){
    $('.example').addClass('wider');
    
    $('#prefetch').text('The div will be: ' + getWidth('wider'));
});

function getWidth(className){
    for (var s = 0; s < document.styleSheets.length; s++){
        var rules = document.styleSheets[s].rules || document.styleSheets[s].cssRules; console.log(rules);
        for (var r = 0; r < rules.length; r++){
            var rule = rules[r]; console.log(rule);
            if (rule.selectorText == '.'+className){
                console.log('match!');
                return rule.style.width;
            }
        }
    }
    return undefined;
}

＆＃13;

.example {
    width: 100px;
    background-color: #ccc;
    border: 1px solid black;
}
.wider {
    width: 320px;
    -webkit-transition: width 5s;
    -moz-transition: width 5s;
    -o-transition: width 5s;
    transition: width 5s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="example">This is a simple container.</div>
<button id="widen" type="button">Widen</button>
<span id="prefetch"></span>

＆＃13;

请记住，我相信这仍然是跨域防护的受害者（如果CSS托管在CDN /其他域上，您将无法检索{ {1}}，因此无法访问最终的宽度。

Answer 3

我选择了对我的问题最有帮助的答案，但似乎我所寻找的解决方案不存在。我需要的是在转换实际完成之前获得元素的宽度（以像素为单位）。该宽度是基于百分比的，因此实际像素宽度将基于许多因素而变化。我最终在现实中做的是：

制作我需要的项目的jQuery克隆＆＃34;结束＆＃34; 过渡测量。
将克隆定位在屏幕外
向克隆添加内联样式，删除CSS继承的过渡属性，以便立即获得最终/结束宽度。
使用JS将结束宽度保存到变量
使用jQuery删除克隆.remove（）

这样做，我现在知道元素开始转换时像素的结束宽度是什么，而不是必须等到转换结束才能捕获结束宽度。

这是一个完成我上面描述的功能。

{{1}}

如何宣布＆＃34;宣布＆＃34; CSS值，而不是计算的CSS值

3 个答案: