Access JavaScript variable in CSS
Question
Below is the code for reference. Value for variable 'imgpath' is changed on load. I need to assign this new value for background image of class 'icon1'. I know this can be done using JavaScript/jQuery, but I need some way to do update this value in CSS itself. Can it be possible using Sass/Less or any other way?
<html>
<head>
<style>
.icon1 {
background: transparent url("imagepath1/icon1.png") no-repeat center center;
</style>
</head>
<body>
<a class="icon1"></a>
<script>
var imgpath = "imagepath1";
if (setnewpath)
imgpath = "imagepath2";
</script>
</body>
</html>
Thank you for any help!
5 answers
solution1
4 2015-06-23 09:08:54
You cannot access Javascript in CSS .
You can use css() to set the css properties using jQuery.
$('.icon1').css('background-image', imgpath + '/icon1.png');
Setting all the properties
$('.icon1').css('background', 'transparent url("' + imgpath + '/icon1.png") no-repeat center center');
css() :
Set one or more CSS properties for the set of matched elements.
solution2
1 2015-06-23 09:13:21
You cannot access javascript from css, but vise versa. See this code:
document.getElementByClassName("icon").style.backgroundImage = "url('+imgpath + '/icon1.png')";
I would prefer this solution, instead of Tushar's, just as it will work on it's own. You don't need jQuery for such a small task.
solution3
0 2015-06-23 09:12:00
我从W3cschool获得参考
document.getElementsByClassName('icon1').background = "transparent url(" +imgpath + "/icon1.png") no-repeat center center";
solution4
0 2015-06-23 09:15:02
Use model variable as razor,I think it's acceptable:
<html>
<head>
<style>
.icon1 { background:transparent url(@Model.imgpath ) no-repeat center center;
</style>
</head>
<body>
<a class="icon1"></a>
<script>
var imgpath = "imagepath1";
if(setnewpath)
imgpath = "imagepath2";
</script>
</body>
</html>
solution5
0 2015-06-23 09:18:57
Lucky for you, stylesheets and rules are actually exposed to the DOM.
One simple way to do it would be to grab a reference to the element and replace its textContent with completely new CSS source, built in JavaScript. I'm not entirely sure if that will actually work, though. Depends on if the browser bothers to re-parse the new content as new CSS.
A slightly more complicated approach that should work, however, is to actually use the StyleSheets Object Model.
You can get the stylesheet with var sheet = document.styleSheets[0];
Then get the rule with var rule = sheet.cssRules[0];
You can then replace the rule text: rule.cssText = '.icon1 { background:transparent url("'+imagepath+'") no-repeat center center;';
Sadly, the API doesn't get more fine-grained that replacing the entire rule text at once.
You can also delete rules and add new ones, rather than altering the text in-place, if you so desire. See https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.