CSS changes its property based on Javascript condition

Question

I need help with changing the property value in the CSS based on the javascript condition. Not sure if this is possible or not. So lets me explain...

I have a javascript detects the browser & version, and assume it works fine. so I have a JS variable as below:

var browser = "IE8";

What I like to do is if "var browser = IE8" then change the style below for the .divFooter IN the @media print from "position: absolute;"; ELSE change the "position: relative;"

@media screen {
        div.divFooter {
            display: none;

        }

@media print {

    div.divFooter {
        display: block;
        position: absolute;   /* -- This is where I want to change the condition based on the Browser Version variable that javascript detected. */
        bottom: 0px;
        font-size: 10pt; 
        text-align: center;         
        line-height: 120%; background: white;
        font-family:Arial, Helvetica, sans-serif;
        margin-top: 2em;
    }

    table {
        page-break-after: avoid;
    }
}

Thanks in advance,

richie · Accepted Answer · 2014-07-03 18:10:10Z

2

That should be fairly easy, essentially you just need to change the property using the CSS method(http://api.jquery.com/css/) on document.ready...

So the jQuery solution would be:

$(document).ready(function(){
    if (browser == "IE8"){
        $('.divFooter').css('position','absolute');
    } else {
        $('.divFooter').css('position','relative');
    }
});

You could also do this with vanilla JS using the Style Object(http://www.w3schools.com/jsref/dom_obj_style.asp) like this:

//set variable for your div (should likely be ID instead of class but no matter)
var yourDiv = document.getElementsByClassName("divFooter");

//if statement to set position
if (browser == "IE8"){
    yourDiv.style.position = "absolute";
} else {
    yourDiv.style.position = "relative";
}

edited Jul 3, 2014 at 18:10

answered Jul 3, 2014 at 18:02

richie

4671 gold badge7 silver badges19 bronze badges

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

4 Comments

Giacomo Paita Over a year ago

Good answer, but let's have a look to the 'if condition': with the code 'browser = "IE8"' you assign the value the variable; you have to use the equal sign '=='.

Milacay Over a year ago

I am trying the $(document).ready(function() ... but it doesn't seem to know the browser variable, is it because "browser" variable from the regular Javascript (outside of Jquery)?

Milacay Over a year ago

my bad.. I updated my question, I actually want to change the .divFooter in the @media print (when it prints), please see if you can help. Thanks!

Giacomo Paita Over a year ago

In that case, my suggest is try to use the conditional css, with the print declaration in it.

Valentin Mercier · Accepted Answer · 2014-07-03 18:02:12Z

2

You can do it easily with jQuery. Initialize the css with the position: relative; then do

<script>
if (browser == "IE8") {
$("div.divFooter").css('position', 'absolute');
}
</script>

answered Jul 3, 2014 at 18:02

Valentin Mercier

5,3564 gold badges28 silver badges51 bronze badges

Comments

Laurent S. · Accepted Answer · 2014-07-03 18:09:15Z

1

I would advise not using Javascript but rather Html conditional comment :

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

here is a more extensive article on this

You could also use a css hack for this specific attribute, but your css won't be valid anymore.

answered Jul 3, 2014 at 18:09

Laurent S.

6,9373 gold badges32 silver badges42 bronze badges

Collectives™ on Stack Overflow

CSS changes its property based on Javascript condition

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related