Saya mewarisi bagian web dari klien vendor tua dan memiliki masalah ukuran gambar. Gambar harus 60×50 tapi untuk beberapa alasan aneh, vendor asli memaksa mereka ke dalam 42×42, begitu mereka melihat tergencet:
|
Baik gambar |
Citra buruk |
 |
|
Berikut adalah markup (agak sederhana):
<Tabel kelas = 'diperpanjang-outlook'>
<thead>
<TR>
<th lebar ='100′>3 Selasa</th>
</TR>
</thead><tbody>
<kelas TR = 'ramalan'>
<lebar TD ='100′>
<UL>
<Li kelas = 'tinggi'>Tinggi: 72°F</Li>
<Li kelas = 'rendah'>Rendah: 44°F</Li>
<Li kelas = 'kondisi'>Cerah
<img src =’http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/Trans/cond007.png’ lebar ='42’ tinggi ='42’ Alt =” />
</Li>
</UL>
</TD>
</TR></tbody>
</Meja>
Anda akan perhatikan bahwa meskipun path ke gambar sendiri menunjukkan dimensi yang tepat (60×50) vendor asli memaksa dalam 42×42. Mengapa? Gila.
Pokoknya, Saya menginginkan solusi cepat dan mudah untuk masalah ini dan aku berpaling untuk jQuery. Triknya adalah untuk menemukan semua yang sesuai <img> Tag. Aku tidak ingin Bergelandangan dengan tag img lain (yang ada banyak). Ini sedikit jQuery melakukan trick:
<jenis script = text/javascript"" src ="http://Ajax.googleapis.com/Ajax/libs/jQuery/1.5/jQuery.min.js"></script>
<script type = "text/javascript">
$(dokumen).siap(fungsi () {$(' li.condition > img').masing-masing(fungsi (Indeks, item)
{
$(item).CSS("lebar", "60");
$(item).CSS("tinggi", "50");
});
}); // pada beban dokumen
</script>
Sedikit kode menemukan koleksi <Li> Tag kelas yang adalah "kondisi" dan <img> anak-anak. Ini kemudian iterates melalui semua itu. Bekerja seperti pesona.
Aku mungkin bisa merampingkan, tapi aku tidak pernah tipe orang unix yang dipecahkan π untuk 18 digit presisi menggunakan sed dan awk dan aku tidak seperti itu jika jQuery pria baik 
.
</akhir>
Ikuti saya di kegugupan di http://www.twitter.com/pagalvin
