当前位置: 动力学知识库 > 问答 > 编程问答 >

Add Number to CSS Rule from JavaScript Calculation

问题描述:

I am creating a slideshow using JavaScript. I am positioning the controls (the next and previous buttons) with JS.

The HTML, when the buttons are added via JS, looks like this:

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

The slide is made up of a figure element with an image and a caption.

I want the controls (two spans) to be positioned vertically in the middle of the image (not taking the height of the caption into account, which could vary).

The spans are positioned like this:

#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;

}

The #previous and #next spans have a padding-bottom that extends it to the height of the image only (does not include the captions) and then the actual text of the buttons are positioned in relation to the span.

I need to calculate the padding-bottom based on the image height. But with different slideshow uses, the image height may change. Another slideshow may use images of a different dimension.

So I want JavaScript to calculate this padding and insert it into the stylesheet. I have the JS for the calculation:

// 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 + "%";

I just can't figure out how to add the percent variable to the stylesheet so that the rule is:

#previous,#next {

padding-bottom:[insert % from JS];

}

Here is my JSFiddle: http://jsfiddle.net/amykirst/17rbku86/

网友答案:

Use this:

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

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: