JS根據字符數更改CSS行高

我有一個ul列表，它是在通過JavaScript加載頁面時動態生成的。所產生的可以看到這裏的代碼（與不相關的項目中去除）：JS根據字符數更改CSS行高

<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財產Tweet（如果超過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..." 
     }); 
    });

來源

2012-03-13 adamdehaven

我沒有看到一個問題在這裏了。什麼是問題？ – 2012-03-13 15:41:18

更新了原來的 – adamdehaven 2012-03-13 15:46:39

我認爲這應和：

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

更新：好吧，也許我明白了：

看一看你使用過的插件的文檔，我發現你可以綁定一個類似於「已加載」的事件處理程序，在呈現推文後觸發。所以，你有能力改變你的代碼：

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" }); 
    } 
    }); 
});

請嘗試，是未經檢驗的:)

來源

2012-03-13 15:47:02 tanathos

請看這個問題底部的更新:) – adamdehaven 2012-03-13 16:09:41

改變行高的方法是$（「ul.tweet_list li」）。css（「line-height」，「55px」）;但我懷疑其他人說，你的推文不在dom準備好的頁面中。你是通過ajax調用來加載它的嗎？ – tanathos 2012-03-13 16:15:59

你是對的......推文不在DOM準備好的頁面中。那麼，我怎麼會打電話給你最後的評論呢？ – adamdehaven 2012-03-13 16:18:03

你：調用鳴叫代碼在您的代碼中更改font-size，這可能是第一個如此改變的問題：

$tweet.css("font-size", ...

到

$tweet.css("line-height", ...

好以及比你的代碼看起來不錯等，所以我會嘗試：

.... 
var $tweet = $(".tweet_first"); 
var $numWords = $tweet.text().split(" ").length; 
alert("num of words: " + $numWords); // make sure you are getting a value 
alert("# of .tweet_first els: " + $tweet.length); // make sure you have an element to change 
...

來源

2012-03-13 15:45:12 ckozl

對不起，在我的頁面上它是正確的，但更改爲字體大小來測試。現在再看看:) – adamdehaven 2012-03-13 15:47:18

當我做了警報，它只是說有1個字...？儘管目前的推文中有10多個。在任何情況下，它不會改變行高：（ – adamdehaven 2012-03-13 15:51:56

@adamdehaven看@我的新編輯，我的猜測是「鳴叫」還沒有... – ckozl 2012-03-13 16:00:14

JS根據字符數更改CSS行高

回答

相關問題