0

皆さん、メリー クリスマス、今年も危険な仕事に手を染めてしまいました。緑のボックスのランダムな 1 つを赤のボックスに変えようとしています。緑のストライプを生成するためにグラデーション パターンを使用しましたが、両方とも 3em であっても、赤いボックスは小さくなっています!!! 何のかかと!!!

私のcodepen取引を見てください： http://codepen.io/githubmaht/pen/jinHo

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var wrapper = document.createElement('wrapper');
wrapper.className = 'wrapper';
wrapper.style.cssText = "display:block;position:relative;height:100%;width:100%;";
document.body.appendChild(wrapper);

var bigholdery = document.createElement('bigholdery');
bigholdery.className = 'bigholdery';
bigholdery.style.cssText="display:block;position:absolute;left:0;top:0;height:50%;width:50%;overflow:auto;";
document.getElementsByClassName('wrapper')[0].appendChild(bigholdery);

// green bars!!!

var big = document.createElement('big');
big.className = 'big';
big.style.cssText="display:block;position:relative;height:300em;background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, green), color-stop(.5, transparent), to(transparent));-webkit-background-size: 6em 6em;";
document.getElementsByClassName('bigholdery')[0].appendChild(big);

// make one red!!!

var redoffset = 3*getRandomInt(0,49);
var red = document.createElement('red');
red.className = 'red';
red.style.cssText="font-size:12px;display:block;position:absolute;top:0;left:0;height:3em;width:100%;background:red;margin-top:"+redoffset+"em;";
document.getElementsByClassName('bigholdery')[0].appendChild(red);

CSS ----->

html{
position:relative;
height:100%;
width:100%;
font-size:12px;
}

body{
position:relative;
height:100%;
width:100%;
background:#BEDFED;
}

.wrapper {
position:relative;
display:block;
height:100%;
}
4

1 に答える 1

1

緑のグラデーションは実際には 300em です。コードで次の行を参照してください。

big.style.cssText="display:block;position:relative;height:300em;
于 2013-11-18T07:56:08.957 に答える