Is there a way to access a JavaScript String variable in the CSS part of the HTML?

Question

For example, I've got a prefix that keeps occuring in all image URLs. It would only be proper to set a common variable with the prefix, for code maintenance. I'm looking for something like this:

<script type="text/javascript">
    var dropBoxPrefix = 'https://dl.dropboxusercontent.com/s/XXXX';
</script>

<style>
    html, body {
        background-image: url(dropBoxPrefix + '/bg.gif');
    }
    .re {
        background-image: url(dropBoxPrefix + '/header-bottom-left.png');
    }
    ul li {
        background-image: url(dropBoxPrefix + '/ok.png');
    }
    .networksTtl {
        background-image: url(dropBoxPrefix + '/Maps.png');
    }
</style>

No, but you could just put the last part of the URL as the background image URL and then use Javascript to fix it on page load. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Sep 2, 2015 at 12:29
You can use a server side language like PHP to construct dynamic styles. Or you can use LESS or SASS that's preprocessor of CSS — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Sep 2, 2015 at 12:33
Or use something like LESS or SASS, which offer (via JS or PHP) variables within CSS. — Mitya
– Mitya, Commented Sep 2, 2015 at 12:34
I would highly recommend LESS or SASS over creating stylesheet using server side scripting. You would love these css pre-processors, and they would help you in many areas of css. — Jehanzeb.Malik
– Jehanzeb.Malik, Commented Sep 2, 2015 at 12:47

cosmycx · Accepted Answer · 2015-09-02 15:54:23Z

1

If you decide to go the LESS way, ( and could use the simpLESS compiler : example write code in filename background.less then drag and drop it into the simpleLess compiler and will get converted to background.css
LESS Code:

   //variables
@dropBoxPrefix : 'https://dl.dropboxusercontent.com/s/XXXX/';
@imageHTML : "bg.gif";
@imageRe : "header-bottom-left.png";
@imageULLI : "ok.png";
@imageNetworksTtl : "Maps.png";

//mixin
.backgroundImage(@image){
    @bi : "@{dropBoxPrefix}@{image}";
    background-image: url(@bi);
}

//styles
html, body{
    .backgroundImage(@imageHTML);
}
.re{
    .backgroundImage(@imageRe);
}
 ul li{
    .backgroundImage(@imageULLI);
}
.networksTtl{
    .backgroundImage(@imageNetworksTtl);
}

you will receive compiled CSS:

html,
body {
  background-image: url("https://dl.dropboxusercontent.com/s/XXXX/bg.gif");
}
.re {
  background-image: url("https://dl.dropboxusercontent.com/s/XXXX/header-bottom-left.png");
}
ul li {
  background-image: url("https://dl.dropboxusercontent.com/s/XXXX/ok.png");
}
.networksTtl {
  background-image: url("https://dl.dropboxusercontent.com/s/XXXX/Maps.png");
}

answered Sep 2, 2015 at 15:54

cosmycx

1241 silver badge5 bronze badges

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

1 Comment

Sly Over a year ago

if this is the answer to your problem, this is not the answer to the question "Is there a way to access a JavaScript String variable in the CSS part of the HTML?"... maybe change the question then ?

suvroc · Accepted Answer · 2015-09-02 12:31:19Z

1

No it is not possible in your way, but you can set this style property during js script execution

document.body.style.backgroundImage = "url('https://dl.dropboxusercontent.com/s/XXXX/bg.gif')";

http://www.w3schools.com/jsref/prop_style_backgroundimage.asp

answered Sep 2, 2015 at 12:31

suvroc

3,0621 gold badge17 silver badges29 bronze badges

Comments

Sly · Accepted Answer · 2015-09-02 12:37:22Z

1

No way but a turnover could be to add styles in your head section with javascript, like this (jQuery example) :

var color1 = 'green';
$('<style>.yourclass { color:' + color1  +'}</style>').appendTo('head');

in pure js :

var color1 = 'green';
var css = '.yourclass { color:' + color1  +'}',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

answered Sep 2, 2015 at 12:37

Sly

3612 silver badges9 bronze badges

Collectives™ on Stack Overflow

Is there a way to access a JavaScript String variable in the CSS part of the HTML?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related