通过JS更改填充

Question

I need to change padding-bottom from -50% to -40% so, here is my CSS code

.mid {
    background-color: rgba(255,205,147,0.68);
    border-radius: 25px;
    margin-top: 18%;
    margin-right: 10%;
    margin-left: 10%;   
    padding-top: 50%;
    padding-bottom: -40%;
    background-attachment: fixed;
    box-shadow: 9px -12px 5px rgba(0,0,0,0.5);
}

and here is my JS code

var expandMid = document.getElementsByClassName("mid");
function buttonReady() {
    if (expandMid.style.padding-bottom == -40%)
        {
    mid.style.padding-bottom == -30%;
        }
        else {
        mid.style.padding-bottom = -40%;
        }
   }

Here is what I can see in browser console

 Failed to load resource: net::ERR_FILE_NOT_FOUND
scripts.js:3 Uncaught SyntaxError: Unexpected token )
8index.html:72 Uncaught ReferenceError: buttonReady is not defined
    at HTMLButtonElement.onclick (index.html:72)

Answer 1

As dashes are not legal in javascript identifiers, you need to use camelCase instead of kebab-case for style names, as in:

expandMid.style.paddingBottom

Also, you seem to have your variable names wrong. Sometimes, the element is referred to as expandMid , sometimes as mid

Answer 2

Padding-bottom is a computed property from your css, therefore, you won't be able to access padding-bottom via elem.style.paddingBottom.

Solving this issue with jQuery

I would recommend this method so that it is cross-browser compatible.

 $(document).ready(function() { var elem = $('.block'); // access paddingBottom like so... // console.log(elem.css('paddingBottom')); $('#set-padding').on('click', function() { var newPaddingBottomValue = '100px'; if (elem.css('paddingBottom') !== '50px') { newPaddingBottomValue = '50px'; } elem.css('paddingBottom', newPaddingBottomValue); }); }); 

 .block { width: 10px; height: 10px; background: black; padding-bottom: 50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block"></div> <h5>some heading to show padding changes</h5> <button id="set-padding">Toggle padding</button> 

Solving this issue without jQuery

This is not supported in IE8 or below!

 (function() { var elem = document.getElementById('block'); var btn = document.getElementById('toggle-padding'); btn.addEventListener('click', function() { var newPaddingBottomValue = '100px'; if (window.getComputedStyle(elem).paddingBottom !== '50px') { newPaddingBottomValue = '50px'; } elem.style.paddingBottom = newPaddingBottomValue; }); })(); 

 #block { width: 10px; height: 10px; background: black; padding-bottom: 50px; } 

 <div id="block"></div> <button id="toggle-padding">Toggle padding</button> 

Answer 3

You're getting a syntax error. Because in JS you can't use some special characters and assume they will just work. So, the - (minus) character is a special math operator. That you can use in CSS , but not in JS!

So, if you want to access something that has a special character(like the style properties of the css), write the property as camel case.

expandMid.style.paddingBottom // would give you the access.

Note that the value of paddingBottom should be a string. Not a number. So, for comparsion use: if (expandMid.style.paddingBottom === '40%') ...

Here's why you can't apply a negative padding value source

Let me know if that helped!

Answer 4

Hope this work. You were saving "mid" ref in "expandMid" but using "mid" directly.

var expandMid = document.getElementsByClassName("mid");
function buttonReady() {
    if (expandMid.style.paddingBottom == -40%){
          expandMid.style.paddingBottom == -30%;
        }
        else {
          expandMid.style.paddingBottom = -40%;
        }
   }

Answer 5

I see at least three things wrong with your code:

1. you don't seem to be running the function which you created. after declaring it, you need to run it with buttonReady();
2. once you do run your function, you will see an error in your browser's console because Javascript variables are not allowed to have dashes in their names.
3. you need to put -30% and -40% inside of quotation marks. The - character is getting treated by Javascript as the subtraction operator, and the % character is getting treated as the modulo operator. If you're trying to compare strings, you need to treat them as such.

I also see a couple of things wrong with the way you are trying to solve the problem:

1. getElementsByClassName will return a list of things, even if you only have one of those things on your page. you need to either provide a different input to that function, or use a different function, or need to
2. you have a variable named mid in some places, but expandMid in other places. this is valid Javascript code (since variables not declared ahead of time will be assumed to be attached to window ) but will result in an error when you run it because that variable does not exist on the window.