如果内容增加,如何更改父div样式?

时间:2009-09-25 11:27:56

标签: jquery css

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

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

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

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

感谢

5 个答案:

答案 0 :(得分:2)

你可以这样做:

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

答案 1 :(得分:1)

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

答案 2 :(得分:1)

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

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

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

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

答案 3 :(得分:1)

我知道这不会回答你的问题,因为你的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添加了代码示例。

答案 4 :(得分:0)

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

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