根据标题长度动态调整（宽度）jquery对话框的大小？

我想根据标题长度更改jquery对话框的宽度，并且 添加了所有必要的js和css文件，包括可调整大小的js和css

我试图增加宽度，但仍然不起作用

请帮忙解决这个问题

对话框的div：

<div id="dialog" title=""
    style="display: none; font-size: 15px; width: 600; height: 400"></div>
<div align="center">

html内容：

<a href="javascript:showMsg('dynamictitle','dynamicontent');">

---

对于基于标题长度的动态调整（宽度）jquery对话框，请浏览此url-找到合适的解决方案可能会对您有所帮助：

您不能通过调用：$（title）.width（）直接计算字符串宽度

使用此函数计算标题字符串宽度：

    function textWidth(text){
     var calc = '<span style="display:none">' + text + '</span>';
     $('body').append(calc);
     var width = $('body').find('span:last').width();
     $('body').find('span:last').remove();
     return width;
    };

函数文本宽度（text）{
变量计算=''+文本+''；
$（'body'）。追加（计算）；
var width=$（'body'）.find（'span:last'）.width（）；
$（'body'）.find（'span:last'）.remove（）；
返回宽度；
};

---

使用如下函数：宽度=文本宽度（标题）

以下是我在初始化任何事件后调整jQuery对话框大小的解决方案： 假设-如果您有元素的id来初始化对话框（{…}）

例如,

$("#dialog_element_id").dialog(
{
  autoOpen: true,
  height: 400,
  width: 360,
  modal: true,
  buttons:
  {
   . . .
  }   
});

$(...).live("click, function()  
{
  var dialogElementParent = $("#dialog_element_id").parent();
  //do some logic
  //...

  //resize
  dialogElementParent.width("...");
  dialogElementParent.height("...");
});

---

以下对Harish Anchu答案的修改允许您传递一个jQuery选择器，并将返回与选择器具有相同字体样式的文本宽度

function textWidth(text, clone_element){
    var calc = '<span>' + text + '</span>';
    var span = $('body').append(calc).find('span:last');
    var clone = $(clone_element);
    if(clone.length > 0){
        var styles = window.getDefaultComputedStyle(clone[0]);
        for(var i = 0; i < styles.length; i++){
            if(styles[i].indexOf("font") >= 0){
                span.css(styles[i],clone.css(styles[i]));
            }
        }
    }
    span.css('display','none');
    var width = span.width();
    span.remove();
    return width;
};

函数textWidth（文本，克隆元素）{
变量计算=''+文本+''；
var span=$（'body'）.append（calc.find（'span:last'）；
变量克隆=$（克隆元素）；
如果（clone.length>0）{
var styles=window.getDefaultComputedStyle（克隆[0]）；
对于（变量i=0；i=0）{
css（样式[i]，clone.css（样式[i]）；
}
}
}
css（'display'，'none'）；
var width=span.width（）；
span.remove（）；
返回宽度；
};

传递给函数showMsg的标题是什么。它是一个字符串吗？尝试在宽度的末尾添加px。我正在将字符串作为标题传递，但其长度超过了添加的px宽度：$（标题）。宽度（）+20+‘px’这不起作用Donald我按你说的做了如果错了请更正我与根据标题长度设置整个对话框宽度无关Harish我不明白在这里我必须传递标题值以计算其宽度，以及您的逻辑和$（title）之间计算的宽度有什么不同。宽度（）.Title是一个字符串，它没有宽度属性。确定如果查找宽度，则只有我可以更改对话框宽度，请帮助我解决此问题。你的意思是，如果元素可用，你给出的代码将给出宽度，但这里我们刚刚要创建，那么如何找到标题的宽度？对话框中的字符串宽度超过600px，但函数返回的字符串宽度是367

$("#dialog_element_id").dialog(
{
  autoOpen: true,
  height: 400,
  width: 360,
  modal: true,
  buttons:
  {
   . . .
  }   
});

$(...).live("click, function()  
{
  var dialogElementParent = $("#dialog_element_id").parent();
  //do some logic
  //...

  //resize
  dialogElementParent.width("...");
  dialogElementParent.height("...");
});

function textWidth(text, clone_element){
    var calc = '<span>' + text + '</span>';
    var span = $('body').append(calc).find('span:last');
    var clone = $(clone_element);
    if(clone.length > 0){
        var styles = window.getDefaultComputedStyle(clone[0]);
        for(var i = 0; i < styles.length; i++){
            if(styles[i].indexOf("font") >= 0){
                span.css(styles[i],clone.css(styles[i]));
            }
        }
    }
    span.css('display','none');
    var width = span.width();
    span.remove();
    return width;
};