有没有办法从Javascript代码中检测元素的真实边框,填充和边距？如果您查看以下代码:
some text here
如果单击按钮,则可以看到填充未报告正确.仅报告通过"样式"直接定义的属性,不报告通过CSS类定义的属性.
有没有办法找回这些属性的最终值？我的意思是浏览器计算并应用所有CSS设置后获得的值.
该style属性可以获取内联分配的样式
元素中指定的样式,请尝试以下操作:
var div = document.getElementById("target");
var style = div.currentStyle || window.getComputedStyle(div);
display("Current marginTop: " + style.marginTop);
如果你使用jQuery,@ vsync的解决方案很好.
var $elm = $('.box');
var hPadding = $elm.outerWidth() - $elm.width();
var vPadding = $elm.outerHeight() - $elm.height();
var hBorder = $elm.outerWidth() - $elm.innerWidth();
var vBorder = $elm.outerHeight() - $elm.innerHeight();
console.log("Horizontal padding & border: ", hPadding);
console.log("Vertical padding & border: ", vPadding);
console.log("Horizontal border: ", hBorder);
console.log("Vertical border: ", vBorder);.box{
width: 50%;
padding:10vw;
border:10px solid red;
}
这是可能的,但当然,每个浏览器都有自己的实现.幸运的是,PPK为我们做了所有艰苦的工作:
http://www.quirksmode.org/dom/getstyles.html
京公网安备 11010802040832号 | 京ICP备19059560号-6 