Question

我正在使用JavaScript创建幻灯片。我用JS来定位控件（下一个和前一个按钮）。

当通过JS添加按钮时，HTML看起来像这样：

<div id="slideshow">
            <figure>
                <img src="https://c4.staticflickr.com/8/7495/16322256485_08ee0ee36f_z.jpg">
                <figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
            </figure>
            <figure class="hide">
                <img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg">
                <figcaption>Insert caption</figcaption>
            </figure>
            <figure class="hide">
                <img src="https://c2.staticflickr.com/8/7474/16120961661_8dc12962dd_z.jpg">
                <figcaption>Insert caption</figcaption>
            </figure>

        <span id="next"><p>&gt;&gt;</p></span>
       <span id="previous"><p>&lt;&lt;</p></span>
</div>
<!-- end slideshow -->

幻灯片由带有图像和标题的图形元素组成。

我希望控件（两个跨度）垂直放置在图像的中间（不考虑标题的高度，这可能会有所不同）。

跨度的定位如下：

#previous,#next {
  height:0;
  padding-bottom:65.9%;
  /* Calculate this with JS so can adjust based on img height */
   position:absolute;
  top:0
}

#previous p,#next p {
  margin:0;
  display:table;
  position:absolute; 
  /* positioned in relation to the #previous and #next spans */
  top:50%;
  -moz-transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%)
}

#previous p {
    left:0;
    border-radius:0 5px 5px 0;
}

#next p {
  right:0; /*moves button to right corner of span instead of left */
  border-radius:5px 0 0 5px;
}

#previous {
    left: 0;
}

#next {
    right: 0;
}

#previous和#next跨度有一个填充底部，仅将其扩展到图像的高度（不包括标题），然后按钮的实际文本相对于跨度定位。

我需要根据图像高度计算填充底部。但是使用不同的幻灯片放映时，图像高度可能会发生变化。另一张幻灯片可能会使用不同维度的图片。

所以我希望JavaScript计算这个填充并将其插入到样式表中。我有JS用于计算：

// Calculate position of buttons
var getImage = photos[0].firstElementChild;
var imageHeight = (getImage.height);
var imageWidth = (getImage.width);
var paddingTop = (imageHeight / imageWidth) * 100;
paddingTop = +paddingTop.toFixed(2);
var percent = paddingTop + "%";

我无法弄清楚如何将百分比变量添加到样式表中，以便规则为：

#previous,#next {
    padding-bottom:[insert % from JS];
 }

这是我的JSFiddle：http://jsfiddle.net/amykirst/17rbku86/

Answer 1

使用此：

document.getElementById("previous").style.paddingBottom = percent;
document.getElementById("next").style.paddingBottom = percent;

FIDDLE：https://jsfiddle.net/lmgonzalves/17rbku86/3/

从JavaScript计算中向CSS规则添加数字

1 个答案: