Question

我试图弄清楚如果在flush文件中设置了这些边距，是否可以使用JavaScript读取div的边距。到目前为止，当我将div的边距数据写成内联样式时（不是在CSS文件中，而是在HTML中），我能够读取div的边距数据：

external css

这是JSFiddle： https://jsfiddle.net/b0kaLk1f/

效果很好，但只需删除(function() { var banner = document.getElementById('banner'); var move = document.getElementById('box'); banner.onclick = function() { alert(move.style.marginLeft); }; })();即可停止工作。我想从style="margin-left: 500px"文件而不是内联样式中读取CSS数据。

Answer 1

Window.getComputedStyle()方法在应用活动stylesheets并解析这些值可能包含的任何基本计算后，给出元素的所有CSS属性的值。

＆＃13;

(function() {
  var banner = document.getElementById('banner');
  var move = document.getElementById('box');
  banner.onclick = function() {
    var style = window.getComputedStyle(move, null);
    alert(style.marginLeft);
  };
})();

＆＃13;

#box {
  margin-left: 500px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  background: #af0000;
  width: 500px;
  height: 300px;
}
#banner {
  border: solid 1px #000;
  overflow: hidden;
  width: 500px;
  height: 300px;
}

＆＃13;

<div id="banner">
  <div id="box"></div>
</div>

＆＃13;

Answer 2

基本上你是试图以样式属性的形式维护状态，这不是一个好主意。您将不得不检索并设置它们。相反，使用类来回移动扩展横幅。代码更短更简单：

banner.onclick = function () {
  ext.classList.toggle('hide_extended_banner');
};

请参阅https://jsfiddle.net/b0kaLk1f/2/。

获得div的保证金价值？

2 个答案: