动态创建具有高度和宽度的 div

发布于 2024-12-21 23:30:53 字数 402 浏览 0 评论 0原文

我在应用程序中动态创建 div，并希望通过函数中的参数来选择 div 的宽度和高度。下面的代码可以工作，但是我不想将样式直接添加到我的 HTML 文档中，但它确实这样做了。

有没有另一种方法可以在不添加 css 到 HTML 文档的情况下完成此任务？

function createDiv(theWidth, theHeight){

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

}

注意：高度和宽度是通过 AJAX 从 JSON 文件中检索的，并且可能有所不同。因此，我无法创建具有不同高度和宽度的不同类。

原文

I'm dynamically creating divs in my application, and wants through parameters in a function to choose the width and height of the divs. The code below works, however I don't want to add styling directly to my HTML document which it does.

Is there another way to accomplish this without adding css to the HTML document?

function createDiv(theWidth, theHeight){

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

}

Note: The height and width is retrieved from a JSON-file through AJAX and can differ. By that reason I can't create different classes with different heights and widths.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尸血腥色 2024-12-28 23:30:53

您可以：

将预定义的类添加到 div，或者
添加带有内容的样式属性

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

编辑：

function createDiv(theWidth, theHeight){

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

}

You can either:

Add a predefined class to the div, or
Add a style attribute with the contents

Why "I don't want to add styling"??

Edit:

function createDiv(theWidth, theHeight){

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

}

回复收藏 0 原文

但可醉心 2024-12-28 23:30:53

您需要在 CSS 文件中定义高度和宽度，并向新元素添加适当的类。

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

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

或者

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

You would need to define the height and width in a CSS file, and add the appropriate class to your new element.

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

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

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

回复收藏 0 原文

傾旎 2024-12-28 23:30:53

我可以看到这种情况发生的唯一其他方法是在 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/

The only other way I can see this happening is by returning in your JSON result a style element with some auto-generated class containing the new width and height. You will add the style to your document and then add the class to the element. Here is a sample:

$(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);
});

For a working example: http://jsfiddle.net/epignosisx/YNpFV/

回复收藏 0 原文

~没有更多了~