Question

我一直在寻找是否可以将JS代码放入CSS代码中，但是没有运气，找不到答案。

我想做的是使三张图片在JS中具有变量并将它们放在顶部：走了： ; CSS代码，以便完成后无论变量值是多少，它们都将一致移动。

//CSS Code//
.someclass {
    top: x;
    left: y;
}

//JS Code//
var x = #;
var y = #;

<!--Someplace that a variable can go here-->
<abbr title="Click For More Information About C#"><img src="https://img.icons8.com/color/500/000000/c-sharp-logo.png" alt="C# Programming Image"></abbr>

如果制作完成，这三张图片（未显示代码）将与具有必要值的其他图片一起移动。

Answer 1

您不能通过这种方式混合使用css / js / html。

如果要使用JS更改CSS属性，请使用.style。

var x = 20;
var y = 100;

var elems = document.getElementsByClassName('someclass');
for (var i = 0; i < elems.length; i++) {
    elems[i].style.top = x + 'px';
    elems[i].style.left = y + 'px';
}

然后用JS设置CSS的更好方法是更改className并在CSS文件中设置样式。

.someclass {color: red; left: 10px;}
.someclass.indented {left: 100px;}

还有JS

var elems = document.getElementsByClassName('someclass');
for (var i = 0; i < elems.length; i++) {
    elems[i].className += ' indented'; // now elements will be moved to left: 100px
}

Answer 2

您不能将JavaScript放入CSS，但是可以通过JavaScript更改CSS样式：

var div = document.getElementById('div1');

div.style.height = '100px';
div.style.width = '100px';
div.style.backgroundColor = 'red';

<div id="div1"></div>

如何将JavaScript变量放入HTML和CSS代码

2 个答案: