Question

我正面临一个小问题。我希望更改父div样式，因为div的内容会增加其文本字符。

<div class="welcome-message"><a href="#">Some link</a></div>

这是html的格式。让我们说它的链接文本有min char 80 chars，如果它超过80则那么父div的样式应该改变ie。宽度：200像素;

jQuery解决方案首选，JS也没关系。

感谢

Answer 1

你可以这样做：

$(document).ready(function()
{
    if ($('.welcome-message a:first').text().length > 80)
        $('.welcome-message').css({'width': 200});
});

Answer 2

$(document).ready(function(){
    var l=$("div.welcome-message").text().length;
    var w=50;

    if(l>80){
        w=200;
    }else if(l>40){
        w=100px
    }
    $("div.welcome-message").css({'width':w+'px'});
});

Answer 3

好吧，假设您有一个单独的类来定义新的更宽的宽度：

function checkLength()
{
   if ($('div.welcome-message a').text().length > 80)
   {
      $('div.welcome-message').addClass('myLargeWidthClass');
   }
   else
   {
      $('div.welcome-message').removeClass();
   }
}

然后您将在加载时调用此函数。 E.g。

$(function(){
   checkLength();
});

Answer 4

我知道这不会回答你的问题，因为你的div只会在初始页面加载时改变，但在阅读了这个问题的答案后，我想添加这个解决方案的完整性，因为有当DOM中的元素发生任何变化时触发的事件（IE除外）......我找到了解决方案here on SO。

总之，这可以根据它的动态内容调整<div>的大小（注意“DOMSubtreeModified”）

 $(".welcome-message a").bind("DOMSubtreeModified",function(){
  var w = ($(this).html().length > 80) ? 200 : 100;
  $(this).parent().css("width", w);
 })

我还在this pastebin添加了代码示例。

Answer 5

没有javascript事件，例如“内容增加了吗？”动态风格，所有你能做的就是在javascript中询问“每n ms内容增加”。

但我认为你的问题更像是一个问题......

如果内容增加，如何更改父div样式？

5 个答案: