javascript - JS 根据字符数更改 CSS 行高

Question

我有一个 ul 列表，它是在通过 JavaScript 加载页面时动态生成的。 生成的代码可以在这里看到(删除了不相关的元素):

<ul class="tweet_list"><li class="tweet_first tweet_odd"></li></ul>

CSS:

​ul.tweet_list li {
    height: 55px;
    line-height: 55px;
    overflow: hidden;
    padding: 0.5em !important;
    vertical-align:middle;
}​

我正在尝试根据推文中的字数更改 CSS line-height 属性(如果超过 9 个字，我希望行高从 55px 更改为 24px)。这是我的 JS:

$(function(){
    var $tweet = $(".tweet_first");
    var $numWords = $tweet.text().split(" ").length;
    if (($numWords >= 1) && ($numWords < 10)) {
        $tweet.css("line-height", "55px");
    }
    else {
        $tweet.css("line-height", "24px");
    }    
});

这是小部件 http://justpaste.it/twitter-widget 的屏幕截图

编辑:我的代码不工作。出于某种原因，除非我进入 styles.css 文件并实际更改行高，否则我上面的任何内容都不会动态更改行高。我如何在我的 JS 中调用 ul.tweet_list li 并将 line-height 属性直接应用于它？

更新:如果有人能告诉我如何动态更改 CSS 部分，我就能弄清楚如何检测推文中的字符数。那么，使用 Javascript，我该如何改变它:

​ul.tweet_list li {line-height: 55px; }​

为此:

ul.tweet_list li {line-height: 24px; }

更新 2: 调用推文的代码:

jQuery(function($){
      $(".tweeter_widget").tweet({
        join_text: "auto",
        username: "twitter_username",
        avatar_size: null,
        count: 1,
        auto_join_text_default: "",
        auto_join_text_ed: "",
        auto_join_text_ing: "",
        auto_join_text_reply: "",
        auto_join_text_url: "",
        loading_text: "loading tweets..."
      });
    }); 

Answer 1

我认为应该是:

$(function(){
    var $tweet = $(".tweet_first");
    var $numWords = $tweet.text().split(" ").length;
    if (($numWords >= 1) && ($numWords < 10)) {
        $tweet.css({ "font-size": "55px", "line-height": "55px" });
    }
    else {
        $tweet.css({ "font-size": "24px", "line-height": "24px" });
    }    
});

更新:好的，也许我已经明白了:

查看您使用过的插件的文档，我发现您可以绑定(bind)一个事件处理程序，如“已加载”，它会在呈现推文后触发。所以你必须改变你的代码:

jQuery(function($){
  $(".tweeter_widget").tweet({
    join_text: "auto",
    username: "twitter_username",
    avatar_size: null,
    count: 1,
    auto_join_text_default: "",
    auto_join_text_ed: "",
    auto_join_text_ing: "",
    auto_join_text_reply: "",
    auto_join_text_url: "",
    loading_text: "loading tweets..."
  }).bind("loaded", function() {
    var $tweet = $(".tweet_first"); // maybe using  $(this)  is better
    var $numWords = $tweet.text().split(" ").length;
    if (($numWords >= 1) && ($numWords < 10)) {
        $tweet.css({ "font-size": "55px", "line-height": "55px" });
    }
    else {
        $tweet.css({ "font-size": "24px", "line-height": "24px" });
    }
  });
});

请尝试，未经测试:)