Javascript最初使用SCSS类将Body对象作为脚本访问
Javascript最初使用SCSS类将Body对象作为脚本访问
提问于 2018-09-21 22:00:57
作为一个非程序员，我尝试使用一个脚本来实现我的目的，并且不得不修改它，希望这对你来说是可以的：
原始脚本中的HTML：
<div class="tc-page-wrap">
</div>SCSS / Less部分：
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.6.3/css/font-awesome.css);
.tc-page-wrap {
margin: 0 auto;
position: relative;
}
.random-tc-page-wrap:after {
font-family: FontAwesome;
content: "\f005";
}
$circle-size: 100px;
$colors: #FFD700, #FFF8DC, #DB7093, #C2B7FE, #95A9FF;
$shapes: '\f005', '\f0c8', '\f1db', '\f096', '\f1d8', '\f1cb';
$shape-count: 50;
@for $i from 1 through $shape-count {
$shape-size: random(10);
$rotation: random(360);
$speed: 40 + random(10);
$color-key: random( length($colors) );
$shape-color: nth( $colors, $color-key );
$shape-key: random( length($shapes) );
$shape-type: nth( $shapes, $shape-key );
$text: random(10);
@keyframes tc-page-wrap-#{$i} {
0% {
transform: translate3d(0,0,0) rotate(#{$rotation + 0}deg);
}
100% {
transform: translate3d(0,0,0) rotate(#{$rotation + 360}deg);
}
}
.tc-page-wrap-container--#{$i} {
animation: tc-page-wrap-#{$i} #{$speed}s linear infinite;
.random-tc-page-wrap:after {
margin: #{$shape-size}rem;
color: $shape-color;
font-size: #{$shape-size * 0.2}rem;
content: $shape-type;
}
}
}Javascript部分：
$(document).ready(function() {
var html = '';
for (var i = 1; i <= 50; i ++) {
html += '<div class="tc-page-wrap-container--'+i+' tc-page-wrap-
animation"><div class="random-tc-page-wrap"></div></div>';
}
document.querySelector('.tc-page-wrap').innerHTML += html;
});我想把生成的内容放到<body> Elemet中，谁能给点帮助？
@dustytrash帮助我知道该去哪里看。为了实现网站的解决方案，我尝试将var html的内容应用于Style属性。这似乎不起作用：´document.getElementById('tc-page-wrap').style.background =html；‘
回答 1
Stack Overflow用户
发布于 2018-09-24 01:38:24
不要使用字符串连接。如果您使用jQuery，请使用var div = $('<div .....>...</div>');创建您的div，然后使用$('some query selector').append(div);将其添加到您需要的任何位置。即使您使用普通的JS，也不要使用字符串连接，而要使用DOM。
在本例中，使用jQuery：
// equivalent to $(document).ready(function() { ... })
$(function() {
var container = $('.tc-page-wrap');
for (var i = 1, inner, outer; i <= 50; i ++) {
inner = $('<div class="random-tc-page-wrap"></div>');
outer = $('<div class="tc-page-wrap-container--'+i+'tc-page-wrap-animation"></div>');
outer.append(inner);
container.append(outer);
}
});此外，如果您使用jQuery，请使用jQuery。不要混入纯JS中，除非它是用于jQuery不能做的事情:如果您或其他任何人必须在以后的任何时候阅读代码，保持一致性有助于更容易理解代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52445393
复制相关文章
相似问题
腾讯云开发者
