通过Javascript设置使用CSS填充、边距和边框的HTML容器的绝对高度（偏移）_Javascript_Height_Padding_Margin_Absolute

通过Javascript设置使用CSS填充、边距和边框的HTML容器的绝对高度（偏移）

javascript

通过Javascript设置使用CSS填充、边距和边框的HTML容器的绝对高度（偏移）,javascript,height,padding,margin,absolute,Javascript,Height,Padding,Margin,Absolute,我想做一些类似于设置offsetHeight（offsetHeight是只读属性）的事情—将3个div（“d1”、“d2”、“d3”）放入一个容器（“c”）：不起作用（可能是因为它是由css类定义的，而不是直接的）谢谢：-）向Thomas致以最诚挚的问候您使用的浏览器以及您拥有的DOCTYPE决定了块元素的默认框模型。通常，默认值为内容框，这意味着填充、边框和边距都会增加高度/宽度，因此如果框模型为内容框，则需要将其考虑到计算中另一个选项是，您可以使用框大小CSS属性将框模型更改为边框框

我想做一些类似于设置offsetHeight（offsetHeight是只读属性）的事情—将3个div（“d1”、“d2”、“d3”）放入一个容器（“c”）：

不起作用（可能是因为它是由css类定义的，而不是直接的）

谢谢：-）

向Thomas致以最诚挚的问候

您使用的浏览器以及您拥有的

DOCTYPE

决定了块元素的默认框模型。通常，默认值为

内容框

，这意味着填充、边框和边距都会增加高度/宽度，因此如果框模型为

内容框

，则需要将其考虑到计算中

另一个选项是，您可以使用

框大小

CSS属性将框模型更改为

边框框

。这意味着填充和边框包含在高度和宽度中，只有边距添加到它们中。在我看来，这个盒子模型通常是一个更方便做我想做的，所以我通常结束切换

参考资料：

经过一些测试，我找到了这个解决方案：（适用于：Opera、Firefox和Google Chrome）（框大小：使用JavaScript时在Firefox上不起作用？！）


c{
背景色：#FF0000；
溢出：隐藏；
边际：0px；
填充：0px；
}
博士{
左：10px；
边框：13px纯黑；
填充：7px；
边缘底部：13px；
利润上限：4倍；
背景色：#FFFF00；
}
文本文本文本
文本文本文本
文本文本文本
///////////////////////////////////////////
//见：http://stackoverflow.com/questions/1601928/incrementing-the-css-padding-top-property-in-javascript
函数getStyle（元素、名称）{
if（元素样式[名称]）{
返回元素样式[名称]；
}
else if（元素当前样式）{
返回元素currentStyle[名称]；
}
else if（document.defaultView&&document.defaultView.getComputedStyle）{
name=name.replace（/（[A-Z]）/g，“-$1”）；
name=name.toLowerCase（）；
s=document.defaultView.getComputedStyle（elem，“”）；
返回s&&s.getPropertyValue（名称）；
}
否则{
返回null；
}
}
///////////////////////////////////////////
var c=document.getElementById（“c”）；
var d1=document.getElementById（“d1”）；
var d2=document.getElementById（“d2”）；
var d3=document.getElementById（“d3”）；
var paddingY=parseInt（getStyle（d1，'paddingTop'），10）+parseInt（getStyle（d1，'paddingBottom'），10）；
var marginTop=parseInt（getStyle（d1，'marginTop'），10）；
var marginBottom=parseInt（getStyle（d1，'marginBottom'），10）；
var marginMax=Math.max（marginTop，marginBottom）；
var borderY=parseInt（getStyle（d1，'borderTopWidth'），10）+parseInt（getStyle（d1，'borderBottomWidth'），10）；
var h=600；
var计数=3；
var hd=数学地板（（h-marginMax*（计数-1）-marginTop-marginBottom-（填充+边界）*计数）/计数）；
c、 样式高度=h+“px”；
d1.样式高度=hd+“px”；
d2.样式.高度=hd+“px”；
d3.样式.高度=hd+“px”；

您的意思是键入

溢出：隐藏.c

类上的code>，还是打字错误？应该是溢出：隐藏。是的，鱼篮戈多！你说得对。。谢谢：-）谢谢：-）-我将DOCTYPE添加到我的示例中。。。但是如何读取css属性“padding”和“margin”警报（d1.style.padding）；不起作用（可能是因为它是由css类定义的，而不是直接的），您无法从Javascript访问快捷方式css属性。您必须这样访问它们：d1.style.paddingLeft
，d1.style.paddingTop，等等。
<!DOCTYPE HTML>
<html>
<body>
<style type="text/css">
.c {
  background-color:#FF0000;
  overflow:hidden;
}

.d {
   left:10px;
   border:9px solid black;
   padding:13px;
   margin:7px;
   background-color:#FFFF00;
}
</style>

<div class="c" id="c">
  <div id="d1" class="d">text text text</div>
  <div id="d2" class="d">text text text</div>
  <div id="d3" class="d">text text text</div>
</div>


<script type='text/javascript'>
  var h=600;
  var hd = Math.floor(h/3);

  var c = document.getElementById("c");
  var d1 = document.getElementById("d1");
  var d2 = document.getElementById("d2");
  var d3 = document.getElementById("d3");

  c.style.height=h +"px";
  d1.style.height=hd +"px";

  var hd2 = (2 * hd - d1.offsetHeight) +"px";

  d1.style.height=hd2;
  d2.style.height=hd2;
  d3.style.height=hd2;

</script>

</body>
</html>

 alert(d1.style.paddingTop);

<!DOCTYPE HTML>
<html>
<body>
<style type="text/css">
.c {
  background-color:#FF0000;
  overflow:hidden;
  margin:0px;
  padding:0px;
}

.d {
   left:10px;
   border:13px solid black;
   padding:7px;

   margin-bottom:13px;
   margin-top:4px;

   background-color:#FFFF00;
   }

</style>

<div class="c" id="c">
  <div id="d1" class="d">text text text</div>
  <div id="d2" class="d">text text text</div>
  <div id="d3" class="d">text text text</div>
</div>


<script type='text/javascript'>
  ///////////////////////////////////////////
  // see: http://stackoverflow.com/questions/1601928/incrementing-the-css-padding-top-property-in-javascript
  function getStyle(elem, name) {
    if (elem.style[name]) {
      return elem.style[name];
    }
    else if (elem.currentStyle) {
        return elem.currentStyle[name];
    }
    else if (document.defaultView && document.defaultView.getComputedStyle) {
      name = name.replace(/([A-Z])/g, "-$1");
      name = name.toLowerCase();
      s = document.defaultView.getComputedStyle(elem, "");
      return s && s.getPropertyValue(name);
    }
    else {
      return null;
    }
  }
  ///////////////////////////////////////////

  var c = document.getElementById("c");
  var d1 = document.getElementById("d1");
  var d2 = document.getElementById("d2");
  var d3 = document.getElementById("d3");

  var paddingY = parseInt(getStyle(d1, 'paddingTop'),10) + parseInt(getStyle(d1, 'paddingBottom'), 10);
  var marginTop  = parseInt(getStyle(d1, 'marginTop'),10);
  var marginBottom  = parseInt(getStyle(d1, 'marginBottom'),10);
  var marginMax  = Math.max(marginTop,  marginBottom);
  var borderY  = parseInt(getStyle(d1, 'borderTopWidth'),10) + parseInt(getStyle(d1, 'borderBottomWidth'), 10);

  var h=600;
  var count=3;
  var hd = Math.floor((h-marginMax*(count-1) - marginTop - marginBottom - (paddingY + borderY) *count) / count) ;


  c.style.height=h +"px";


  d1.style.height=hd +"px";
  d2.style.height=hd +"px";
  d3.style.height=hd +"px";

</script>

</body>
</html>