2015-06-18 40 views
0

我正在使用JavaScript創建幻燈片。我使用JS定位控件(下一個和上一個按鈕)。從JavaScript計算向CSS規則添加數字

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

+1

提示:給內部元素「display:table-cell」和「vertical-align:middle」。它可能會解決你的問題。 – melancia

+0

或者您可以使用php,如下所示: http://stackoverflow.com/questions/476276/using-javascript-in-css – Anna

+0

https://developer.mozilla.org/en-US/docs/Web/ API/CSS_Object_Model/Using_dynamic_styling_information您可以使用CSSOM在CSS樣式表中插入CSS規則。 – Xufox

回答