Some Css Property does not work with this Script

Question

I want to redirect users to another page, if the CSS properties on an element do not match.

Currently, this works:

<div id="mydoom">
    myDoom
</div>

<style>
    #mydoom {
        position: relative;
        font-size: 25px;
        color: red;
        visibility: hidden;
        display:none;
    }
</style>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $(function() {
        if (
            $("#mydoom").css('visibility') == 'hidden' && // See if the visibility is hidden.
            $("#mydoom").css('position') == 'relative' && // See if the position relative.
            $("#mydoom").css('display') == 'none' && // See if the display is set to none.
            $("#mydoom").css('font-size') == '25px' // See if the font-size is 25px.
       ) {
           //do nothing
       } else {
           window.location.replace("http://example.com");
       }
   });
})
//]]>
</script>

It worked and redirect the page if I change any of that CSS properties to some other value, if i change position:relative to position:absolute then the page redirect to example.

However, when I try to check the padding property, it doesn't redirect.

For example:

<div id="mydoom">
    myDoom
</div>

<style>
    #mydoom {
        position: relative;
        padding: 12px;
        color: red;
        visibility: hidden;
        display:none;
    }
</style>

<script type='text/javascript'>
//<![CDATA[
    $(document).ready(function() {
        $(function() {
            if (
                $("#mydoom").css('visibility') == 'hidden' && // See if the visibility is hidden.
                $("#mydoom").css('position') == 'relative' && // See if the position is relative.
                $("#mydoom").css('display') == 'none' && // See if the display is set to none.
                $("#mydoom").css('padding') == '5px' // See if padding is 5px.
          ) {
              //do nothing
          } else {
             window.location.replace("http://example.com");
          }
     });
 })
//]]>
</script>

Now you see, I put padding property and set it to 5px in JavaScript but write 12px in CSS, now the page should be redirected but it cannot.

Why does the padding property does not work ?

Possible duplicate of jQuery How to Get Element's Margin and Padding? — Steve
– Steve, Commented Feb 12, 2016 at 0:02
@Steve can you make the script for me, i dont know more about javascript, how to make it possible, i check that post but nothing to found to work...how to make my existing script to work with padding ... — Jane Cross
– Jane Cross, Commented Feb 12, 2016 at 0:05
Unfortunately, SO is not a script writing service. Take a look at the accepted answer on the linked question to see how to get an element's padding in jQuery. (Hint: you need to get a direction's padding, not the padding shorthand) — Steve
– Steve, Commented Feb 12, 2016 at 0:06
Possible duplicate of get element padding value using javascript — user5201742
– user5201742, Commented Feb 12, 2016 at 0:08
@Steve i also tried padding-left but it also not work..can you please share the code with me. thanks — Jane Cross
– Jane Cross, Commented Feb 12, 2016 at 0:08

Josh · Accepted Answer · 2016-02-12 00:06:42Z

0

I may be wrong, but pretty sure in JQuery the shorthand for 'padding' is not always accepted. Something more appropriate would be to ask for 'padding-top', 'padding-right'... and so on. I will test it and get back here.

answered Feb 12, 2016 at 0:06

Josh

191 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Some Css Property does not work with this Script

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related