從JavaScript計算向CSS規則添加數字

Question

我正在使用JavaScript創建幻燈片。我使用JS定位控件（下一個和上一個按鈕）。

的HTML中，當按鈕被經由JS加入，看起來像這樣：

<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/