Форум

Vladimir93 · #1 (**permalink**) 10.11.2014, 12:24

Добрый день. Такой вопрос. У меня в файле 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;

ksa · #2 (**permalink**) 10.11.2014, 13:15

Сообщение от Vladimir93

Интересно, как присвоить цвет диву, и высоту заданную в процентах.

Как-то так...

<div align="center" id="red"></div>
<script>
document.getElementById('red').style.backgroundColor='red';
document.getElementById('red').style.height='50%';
</script>

Vladimir93 · #3 (**permalink**) 10.11.2014, 15:15

Может я что-то упускаю...вот есть див с 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 нет.

Erolast · #4 (**permalink**) 10.11.2014, 16:05

1. Незачем трижды заново находить элемент. Найди один раз, присвой переменной и опирируй уже с этой переменной.
2. CSS-свойствам min-width и min-height соответствуют свойства minWidth и minHeight объекта style.
3. Посмотри в консоль ошибок.

ksa · #5 (**permalink**) 10.11.2014, 16:44

Сообщение от Vladimir93

document.getElementById('red').style.backgroundColor = params.lines[0].background;

Для понятия работоспособности этой строки нужно бы знать чему равняется

params.lines[0].background

...

ksa · #6 (**permalink**) 10.11.2014, 16:45

Сообщение от Vladimir93

Может я что-то упускаю...

Как минимум то, что я делаю готовый пример... А ты кидаешь какие-о куски, которые даже запустить тут нельзя.

Vladimir93 · #7 (**permalink**) 10.11.2014, 21:19

Сообщение от ksa

Как минимум то, что я делаю готовый пример... А ты кидаешь какие-о куски, которые даже запустить тут нельзя.

Спасибо. Я вижу, что он работает. Не знаю, как здесь прекрепить зеленый треуголник на выполнение. Но..выкладываю весь код..Ткните носом почему он не работает

<!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%}

ruslan_mart · #8 (**permalink**) 11.11.2014, 07:35

Сообщение от Erolast

1. Незачем трижды заново находить элемент. Найди один раз, присвой переменной и опирируй уже с этой переменной.

Можно по круче.

with(document.getElementById('red').style) {
    height = '33%'
    backgroundColor = 'red';
    width = '100%';
}

А ещё круче - через класс.

ksa · #9 (**permalink**) 11.11.2014, 08:21

Сообщение от Vladimir93

Не знаю, как здесь прекрепить зеленый треуголник на выполнение. Но..выкладываю весь код..

Это опять куски... Вот как нужно

<!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>

Сообщение от Vladimir93

Ткните носом почему он не работает

Там ошибка в 80-той строке...

Цитата:

Uncaught exception: TypeError: 'params.lines.parse' is not a function

Сообщение от Vladimir93

lines: [{background: 'red'}]

И вот это - фигня какая-то...

Erolast · #10 (**permalink**) 11.11.2014, 09:58

Сообщение от Ruslan_xDD

with(document.getElementById('red').style) {
    height = '33%'
    backgroundColor = 'red';
    width = '100%';
}

Опасно.

Форум

Справочник

Discord чат

Курсы javascript