Создание элемента со свойствами, используя объектный литерал

Question

Начиная с версии 1.4 jQuery; Вы были в состоянии создать элемент, используя литерал объекта, определяющие свойства элементов ...

$("<div />", 
{ 
    id: "test", 
    name: "test", 
    class: "test-class" 
}); 

На вершине назначая несколько свойств элемента; Я хотел бы добавить некоторые встроенные стили. ? Возможно ли это, используя литерал объекта ... Я thingking что-то вдоль линий:

$("<div />", 
{ 
    id: "test", 
    name: "test", 
    class: "test-class", 
    style: { 
     width: "100px", 
     height: "100px", 
     background-color: "#fff" 
    } 
}); 

Answer 1

Вы можете передать имена и аргументы метода на карту, которая будет выполнена на объекте.

$("<div />", 
{ 
    id: "test", 
    name: "test", 
    class: "test-class", 
    css: { 
     width: "100px", 
     height: "100px", 
     backgroundColor: "#fff" 
    } 
}); 

От documentation:

Кроме того, любой тип события может быть передан, и следующие методы JQuery можно назвать: Val, CSS, HTML, текст, данные, ширина, высоты или смещения.

Answer 2

Вы всегда можете написать свой собственный вспомогательный метод, который позволил бы вам сделать

$('<div>', 
{ 
    id: 'test', 
    name: 'test', 
    class: 'test-class', 
    style: $.objectToCss(
    { 
     width: '100px', 
     height: '100px', 
     background-color: '#fff' 
    }) 
} 

полностью непроверенной версии такого вспомогательного метода может выглядеть примерно так:

$.objectToCss = function(obj) { 
    var css; 
    $.each(obj, function(name, value) { 
     css += name + ': ' + value + ';'; 
    }); 
    return css; 
}; 

Answer 3

Вместо style используйте css, например:

$("<div />", { 
    id: "test", 
    name: "test", 
    "class": "test-class", //patrick's right, IE specifically doesn't like class 
    css: { 
     width: "100px", 
     height: "100px", 
     "background-color": "#fff" 
    } 
}); 

You can give it a try here, также обратите внимание, что background-color (так как он имеет тире) должен быть в кавычках или быть backgroundColor. Другие специальные свойства отображаются таким образом, val, css, html, text, data, width, height и offsetare treated special here.

Answer 4

Другим решением (в отдельном ответе, чтобы сделать возможным голосовать либо из моих решений вверх или вниз отдельно) было бы просто добавить вызов .css() потом:

$('<div>', 
{ 
    id: 'test', 
    name: 'test', 
    class: 'test-class' 
}).css(
{ 
    width: '100px', 
    height: '100px', 
    backgroundColor: '#fff' 
});