0

大家圣诞快乐，今年我又开始冒险了。我试图让我的一个随机绿色盒子变成一个红色盒子。我使用渐变图案来生成绿色条纹，但我的红色框更小，即使它们都是 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 回答