Javascript Доступ к объекту Body как к сценарию с использованием классов SCSS изначально - PullRequest
Новая
       6

Javascript Доступ к объекту Body как к сценарию с использованием классов SCSS изначально

0 голосов
/ 21 сентября 2018

Как не программист, я пытаюсь использовать сценарий из моей цели и должен изменить его, надеюсь, что это нормально для вас:

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.Это, похоже, не работает: «документ.getElementById (« tc-page-wrap »). Style.background = html; ´

1 Ответ

0 голосов
/ 23 сентября 2018

Не использовать конкатенацию строк.Если вы используете jQuery, создайте свой div, используя var div = $('<div .....>...</div>');, а затем добавьте его туда, куда вам нужно, с помощью $('some query selector').append(div);.Даже если вы используете простой JS, не используйте конкатенацию строк, используйте DOM API.

В этом случае, используя 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 не может сделать: если вам или кому-либо еще нужно прочитать код в какой-то момент позже, то согласованность облегчает понимание кода.

...