Question

我在我的应用程序中动态创建div，并希望通过函数中的参数来选择div的宽度和高度。下面的代码有效，但是我不想直接在我的HTML文档中添加样式。

有没有其他方法可以在不向HTML文档添加css的情况下实现此目的？

function createDiv(theWidth, theHeight){

var box = $('<div/>', {
   'class': 'box',
   'width': theWidth,
   'height': theHeight,
}).appendTo('#content');

}

注意：通过AJAX从JSON文件中检索高度和宽度，可能会有所不同。由于这个原因，我无法创建具有不同高度和宽度的不同类。

Answer 1

你可以：

向div添加预定义的类，或
添加包含内容的样式属性

为什么“我不想添加样式”??

编辑：

function createDiv(theWidth, theHeight){

    $('<div class=\'box\' style=\'width:'+theWidth+'px;height:'+theHeight+'px;\'/>').appendTo('#content');

}

Answer 2

您需要在CSS文件中定义高度和宽度，并将相应的类添加到新元素中。

.box {
  height: ...;
  width: ...;
}

var box = $('<div/>', {
    class: 'box'
}).appendTo('#content');

或者

var box = $("<div/>").addClass("box").appendTo("$content");

Answer 3

我能看到这种情况的唯一另一种方法是在JSON结果中返回一个样式元素，其中包含一些包含新宽度和高度的自动生成的类。您将向文档添加样式，然后将该类添加到元素中。这是一个示例：

$(function(){
    var json = {
        cssClass: "random1",
        style: "<style type='text/css'>.random1{width:200px;height:200px}</style>"};

    alert("Wait");
    $("head").append(json.style);
    $("div").addClass(json.cssClass);
});

对于一个工作示例：http://jsfiddle.net/epignosisx/YNpFV/

动态创建高度和宽度的div

3 个答案: