Форум

z-z · #1 (**permalink**) 17.02.2013, 11:26

Здравствуйте. вобщем есть у меня конструкция, которая явно не правильная... помогите правильно составить, пожалуйста...

так я намудрил потому, что не знаю, какие параметры могуть быть переданы. И давать им значения по умолчанию тоже не получится, так как их куча...

a[1] - объект с параметрами элемента. Соответственно a[1]["style"] - стили, там могут быть width, height, background ну и так далее.

передается это как то типа style : {width : "100px", height : "200px", background : "#32cd32"}

Так вот как мне присвоить элементу все эти стили?

if(a[1]["style"]){ 
	for(i in a[1]["style"]){
		arr.push(i)                              // название стиля
		arr2.push(a[1]["style"][i])              // значение стиля
	}
			
	for(i in arr){
		var styleName = arr[i]
		var styleVal = arr2[i]
		newElem.style.styleName = styleVal
	}
}

рони · #2 (**permalink**) 17.02.2013, 11:40

z-z,
на jquery $(a[1]).css(a[1]["style"])

danik.js · #3 (**permalink**) 17.02.2013, 11:58

рони, ну ты даешь! Ты тоже jQuery-зомби?
z-z,

for(i in arr){
    var styleName = arr[i]
    var styleVal = arr2[i]
    newElem.style[styleName] = styleVal
}

А к чему эти переливания из пустого в порожнее? Вот так это делается:

var style = a[1]["style"] || {};

for(var property in style){
    newElem.style[property] = style[property];
}

danik.js · #4 (**permalink**) 17.02.2013, 12:03

for(i in arr) .. - верный знак того, что человек не умеет делать отладку скрипта. Ибо отслеживать глобальную переменную в отладчике неудобно.

z-z · #5 (**permalink**) 17.02.2013, 12:06

danik.js,
спасибо. сам до этого дошел сразу после того, как пост создал))

еще вопрос есть.. объект в целом передает так же атрибуты типа названия класса и айди... я проверяю циклом и исключаю style, чтобы потом его отдельно обработать...

но как мне таким же образом какой нибудь обработчик передать?

айди смог прикрепить, а вот обработчик никак не хочет прикрепляться...

например как то типа

newElem("div", {
        id : "newId",
        style : {
            //тут стили
        },
        onclick : "zz()"
})

danik.js · #6 (**permalink**) 17.02.2013, 12:11

z-z, не путай атрибуты со свойствами
newEl.onclick = zz - это свойство, желательно делать так.
newEl.setAttribute('onclick', 'zz()') - это атрибут, нежелательно использовать

newElem("div", {
        id : "newId",
        style : {
            //тут стили
        },
        onclick : zz
})

Вот так делай.

рони · #7 (**permalink**) 17.02.2013, 12:12

тогда так

for (var i=0; i<arr.length; i++)  {
if (arr[i]["style"]){
var style =  arr[i]["style"];
var newElem =  arr[i];
for(var property in style){
newElem.style[property] = style[property];
}}}

ну и учитывать что background-color = backgroundColor

danik.js · #8 (**permalink**) 17.02.2013, 12:15

z-z, посмотри как это сделано в MooTools или jQuery.

z-z · #9 (**permalink**) 17.02.2013, 12:23

danik.js,
хорошо. допустим строка выглядит так

addElem("div",
		{	
			id : "newId",
			className : "newClass",
			style : 
				{
					width : "100px",
					height: "200px",
					background : "#32cd32"
				},
			onclick : zz
		})

а как мне это внутри функции addElem обработать? я прохожусь по свойствам объекта и есть там есть свойство style, обрабатываю его отдельно... и все получается нормально) а вот как добавить обработчик? не так, чтобы обработчик работал в пределах только этого скрипта, а так, чтобы у элемента был полноценный обработчик... что-то типа

<div id="newId" onclick="zz()"></div>

danik.js · #10 (**permalink**) 17.02.2013, 12:54

<body>
<script>
function zz(e) {
    alert('click handler');
}

addElem("div",
{  
    id : "newId",
    className : "newClass",
    textContent: 'Нажми меня',
    style :
        {
            width : "100px",
            height: "200px",
            background : "#32cd32"
        },
    onclick : zz
})

function addElem(tag, properties) {
    var element = document.createElement(tag);
    for (var property in properties) {
        switch (property) {
            case 'style':
                (function(style) {
                    for (var property in style) {
                        element.style[property] = style[property];
                    }
                })(properties[property]);
                break;
            default:
                element[property] = properties[property];
        }
    }
    
    return document.body.appendChild(element);
}
</script>
</body>

Форум

Справочник

Discord чат

Курсы javascript