如何通過元素的寬度更改背景顏色？

我正在嘗試製作一個進度條。該HTML如下：如何通過元素的寬度更改背景顏色？

<div class="progress-bar" style="width:5%"></div>

我要根據它的寬度繪製DIV的背景。例如，如果它低於100（返回的值是px），我希望它被塗成紅色。

我tryed如下：

var currentWidth = $('.progress-bar').width(); 
if (currentWidth < 100) { 
    $('.progress-bar').css('background-color','red'); 
}

Here is the demo on JSFiddle.

但它不是畫吧。

我不習慣使用javascript和jquery，所以我相信它可能是一個語法錯誤或我看不到的東西。任何人都可以幫助我如何使它工作嗎？

在此先感謝。

來源

2013-07-26 LuAmbros

代碼看起來很好，只要它在文檔準備好之後或者在DOM中的元素之後，但是究竟是在應該發生，僅在頁面載入中，還是在某個事件或...上？ – adeneo

你需要設置一個高度。否則它不會顯示 –

看起來對我很好：http://jsfiddle.net/HxVNj/你給它一個高度或添加任何內容，所以它顯示。你在渲染之前調用它嗎？ – epascarello

由於您使用的內嵌樣式，你可以使用div的風格屬性來獲取寬度爲％

var currentWidth = $('.progress-bar')[0].style.width; 
if (parseFloat(currentWidth, 10) < 100) { 
    $('.progress-bar').css('background-color','red'); 
}

對於多

$('.progress-bar').each(function(){ 
    var currentWidth = this.style.width; 
    if (parseFloat(currentWidth, 10) < 11) { 
     $(this).css('background-color','red'); 
    } 
});

來源

2013-07-26 15:13:22 Musa

謝謝，但它仍然無法正常工作。它繪製所有進度條。在這裏：http://jsfiddle.net/uSSyx/ – LuAmbros

@LuAmbros我想你錯過了在前面的例子中添加jQuery – Praveen

沒錯，它在這裏工作，謝謝！ http://jsfiddle.net/uSSyx/6/我不知道如何，但它不能在線工作！ Myabe，因爲我有很多進度條... – LuAmbros

您的代碼正在運行，您可能需要將代碼放入document.ready，並在div中放置一些文本以查看結果。還要確保你成功地包含了jQuery。

Live Demo

的Html

<div class="progress-bar" style="width:5%">123</div>

的Javascript

$(document).ready(function(){ 
    var currentWidth = $('.progress-bar').width(); 
    if (currentWidth < 100) { 
     $('.progress-bar').css('background-color','red'); 
    } 
});

來源

2013-07-26 15:13:01 Adil

你的代碼是正確的。唯一的一點是指定height

<div class="progress-bar" style="width:5%;height:5px"></div>

，你JS應該lilke

$(function() { 
    var currentWidth = $('.progress-bar').width(); 
    console.log(currentWidth); 
    if (currentWidth < 100) { 
     $('.progress-bar').css('background-color', 'red'); 
    } 
});

Fiddle

來源

2013-07-26 15:16:45 Praveen

這裏是「手動」的進度條，您可以通過點擊一個按鈕，增加怎麼看呢隨着它的增長而改變顏色和尺寸。只需刪除按鈕並放入循環中即可自動執行相同的操作。

Demo

HTML

<div class="progress-bar"></div> 
<input type="button" id="increase" value="Increase" />

CSS

.progress-bar { 
    border: 1px solid black; 
    width: 5px; 
    height: 50px; 
}

jQuery的

$(document).on("click", "#increase", function() { 
    var currentWidth = $('.progress-bar').width(); 
    currentWidth += 5; 
    $('.progress-bar').css('width', currentWidth + 'px'); 
    if (currentWidth < 100) { 
     $('.progress-bar').css('background-color', 'red'); 
    } else if (currentWidth < 200) { 
     $('.progress-bar').css('background-color', 'yellow'); 
    } else { 
     $('.progress-bar').css('background-color', 'green'); 
    } 
});

來源

2013-07-26 15:34:56 defaultNINJA

如何通過元素的寬度更改背景顏色？

回答

相關問題