Передача параметров JS в HTML
Добрый день. Такой вопрос. У меня в файле JS есть массив массивов со значениями стилей. Как в HTML-документе div-ам присваивать значения из этого массива.(То есть ссылаться из JS файла в HTML). На переменную upDateTime не обращаем внимание. Интересно, как присвоить цвет диву, и высоту заданную в процентах.
<div align="center" id="red"></div> var params = {
lines: [
{
background: '#00F',
updateTime: 1000,
elements: [{
background: 'yellow',
width: 25
},
{
background: 'green',
width: 50
},
{
background: 'red',
width: 25
}
]
},
{
background: 'yellow',
updateTime: 1000,
elements: [{
background: '#00F',
width: 25
},
{
background: '#00F',
width: 50
},
{
background: '#00F',
width: 25
}]
}
,
{
background: '#00F',
updateTime: 1000,
elements: [{
background: '#00F',
width: 25
},
{
background: '#00F',
width: 50
},
{
background: '#00F',
width: 25
}]
}
]
}
var a = params.lines.length;
lines: [{background: 'red'}]
function createDiv1(){
for (var i = 0; i < params.lines.length; i++){
}
}
document.getElementById('red').style.height = 100/a;
document.getElementById('blue').style.height = 100/apx;
document.getElementById('green').style.height = 100/apx;
document.getElementById('red').style.backgroundColor = params.lines[0].background;
|
Цитата:
<div align="center" id="red"></div>
<script>
document.getElementById('red').style.backgroundColor='red';
document.getElementById('red').style.height='50%';
</script>
|
Может я что-то упускаю...вот есть див с id='red' я прописываю
document.getElementById('red').style.height = '33.3333333%';
document.getElementById('red').style.backgroundColor = params.lines[0].background;
document.getElementById('red').style.width = '100%';
по идее должны появится красная полоса сверху на всю ширину экрана и на треть в высоту. Файл CSS не описан. То есть, как я понимаю - этим JS-кодом хочу заменить CSS файл. #red {
min-width: 100%;
min-height: 33.333333333333%;
background-color: red;
}
Но с CSS работает, а в Javascript нет. |
1. Незачем трижды заново находить элемент. Найди один раз, присвой переменной и опирируй уже с этой переменной.
2. CSS-свойствам min-width и min-height соответствуют свойства minWidth и minHeight объекта style. 3. Посмотри в консоль ошибок. |
Цитата:
params.lines[0].background ... |
Цитата:
|
Цитата:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="JS.js"></script>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>
<div align="center" id="red"></div>
<div align="center" id="blue"></div>
<div align="center" id="green"></div>
</body>
</html>
var params = {
lines: [
{
background: 'red',
updateTime: 1000,
elements: [{
background: 'yellow',
width: 25
},
{
background: 'green',
width: 50
},
{
background: 'red',
width: 25
}
]
},
{
background: 'yellow',
updateTime: 1000,
elements: [{
background: '#00F',
width: 25
},
{
background: '#00F',
width: 50
},
{
background: '#00F',
width: 25
}]
}
,
{
background: '#00F',
updateTime: 1000,
elements: [{
background: '#00F',
width: 25
},
{
background: '#00F',
width: 50
},
{
background: '#00F',
width: 25
}]
}
]
}
var a = params.lines.length;
lines: [{background: 'red'}]
var b = params.lines.parse();
document.getElementById('red').style.height = '33%'
document.getElementById('red').style.backgroundColor = 'red';
document.getElementById('red').style.width = '100%';
#blue {
min-width: 100%;
min-height: 33.333333333333%;
background: blue;
}
#green {
min-width: 100%;
min-height: 33.333333333333%;
background: brown;
}
#red1 {
min-width: 25%;
background: greenyellow;
}
html, body {height: 100%}
|
Цитата:
with(document.getElementById('red').style) {
height = '33%'
backgroundColor = 'red';
width = '100%';
}
А ещё круче - через класс. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
#blue {
min-width: 100%;
min-height: 33.333333333333%;
background: blue;
}
#green {
min-width: 100%;
min-height: 33.333333333333%;
background: brown;
}
#red1 {
min-width: 25%;
background: greenyellow;
}
html, body {height: 100%}
</style>
<script type='text/javascript'>
var params = {
lines: [
{
background: 'red',
updateTime: 1000,
elements: [{
background: 'yellow',
width: 25
},
{
background: 'green',
width: 50
},
{
background: 'red',
width: 25
}
]
},
{
background: 'yellow',
updateTime: 1000,
elements: [{
background: '#00F',
width: 25
},
{
background: '#00F',
width: 50
},
{
background: '#00F',
width: 25
}]
}
,
{
background: '#00F',
updateTime: 1000,
elements: [{
background: '#00F',
width: 25
},
{
background: '#00F',
width: 50
},
{
background: '#00F',
width: 25
}]
}
]
}
var a = params.lines.length;
lines: [{background: 'red'}]
var b = params.lines.parse();
document.getElementById('red').style.height = '33%'
document.getElementById('red').style.backgroundColor = 'red';
document.getElementById('red').style.width = '100%';
</script>
</head>
<body>
<div align="center" id="red"></div>
<div align="center" id="blue"></div>
<div align="center" id="green"></div>
</body>
</html>
Цитата:
Цитата:
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 10:45. |