Javascript adding to CSS value

Question

I can't seem to figure this out anywhere! So I want to remove x percentage to the element when another element is clicked EACH time. This is what I have so far, any help?

var more = document.querySelector(".more");
more.onclick = function(){
  document.querySelector("#moreinfo").style.marginLeft - "-5%";
}

are you trying to subtract -5% or are you trying to assign? because your code doesn't do anything, it subtracts then it does nothing. — Wreigh
– Wreigh, Commented Feb 7, 2018 at 1:15
You need to get the current marginLeft, subtract 5% and then use the result as the newly assigned value - otherwise you're just setting a value of -5%. — sideroxylon
– sideroxylon, Commented Feb 7, 2018 at 1:17

Scott Marcus · Accepted Answer · 2018-02-07 01:26:28Z

You need to use getComputedStyle() to obtain the style information for styles that are not set via an inline style attribute.

Also, depending on how you have your HTML set up, percentages may not work.

Finally, you have to get the current margin-left, extract the number portion of it, do math with that number and then concatenate back the unit to create a valid property value.

var more = document.querySelector(".more");
more.onclick = function(){
  var currentLeftMargin = getComputedStyle(more).marginLeft;
  console.log(currentLeftMargin);
  
  // Element's style = number portion of current style, then do math, then add back on the unit
  more.style.marginLeft = (parseInt(currentLeftMargin, 10) - 5) + "px";
}

.more { background-color:yellow; margin:50px; height:50px; text-align:center; }

<div class="more">Click Me Over and Over</div>

webdevdani · Accepted Answer · 2018-02-07 01:22:03Z

1

You would have to store the value of the marginLeft in a variable, perform your math on it, add back the percentage unit, and then apply it to the element. Ex:

more.onclick = function() {
  var moreInfo = document.getElementById('moreInfo');
  var marginLeft = moreInfo && parseInt(moreInfo.style.marginLeft, 10);
  if (marginLeft) {
    moreInfo.style.marginLeft = (marginLeft - 5) + '%';
  }
}

<div id="more-info"></div>

answered Feb 7, 2018 at 1:22

webdevdani

1,1127 silver badges11 bronze badges

Comments

Pixelomo · Accepted Answer · 2018-02-07 01:30:40Z

0

This is the jQuery way:

$('.more').click(function(){

  // get the current margin-left value, convert to integer and store it as a variable 
  var marginLeft = parseInt($(".post-text").css('margin-left'));

  // then update the margin-left style, subtracting 5 from the current
  $("#moreinfo").css('margin-left', (marginLeft - 5) +'%')

})

answered Feb 7, 2018 at 1:30

Pixelomo

6,8354 gold badges49 silver badges62 bronze badges

Comments

xianshenglu · Accepted Answer · 2018-02-07 01:31:49Z

0

use getComputedStyle:

    var more = document.querySelector(".more");
    more.onclick = function() {
        let moreinfo = document.querySelector("#moreinfo");
        moreinfo.style.marginLeft = parseFloat(window.getComputedStyle(moreinfo).marginLeft) * 0.95 + 'px';
    };

<button class="more">click me</button>
<div id="moreinfo" style="background: pink;width:100px;margin-left: 200px">boxes</div>

edited Feb 7, 2018 at 1:31

answered Feb 7, 2018 at 1:22

xianshenglu

5,4483 gold badges21 silver badges39 bronze badges

Comments

Gadget Master · Accepted Answer · 2018-02-07 01:32:42Z

0

You can use the UltraPlugin.js function: var myElement = document.GetElementById(element); myElement.onclick = css("myElement {css code here}");

UltraPluginJs

answered Feb 7, 2018 at 1:32

Gadget Master

16

Comments

Shaik · Accepted Answer · 2018-02-07 05:51:12Z

0

 document.getElementById("#moreinfo").style.marginLeft - "-5%";

Replace this

answered Feb 7, 2018 at 5:51

Shaik

3882 silver badges15 bronze badges

Collectives™ on Stack Overflow

Javascript adding to CSS value

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related