本文介绍如何利用JavaScript简单函数限制图片最大显示宽度,防止大尺寸图片破坏网页整体布局。通过onload事件动态调整图片宽度,实现自动适配,避免繁琐的后端判断逻辑,确保页面视觉效果整洁。
JavaScript限制图片宽度的实现思路
在网页开发中,如何限制图片大小以防止其超出容器撑破页面是一个常见问题。相比使用ASP等后端技术进行复杂的判断和逻辑处理,使用JavaScript前端脚本更为简便高效。核心思路是编写一个简单函数,在图片加载时检查其原始尺寸,若超过预设的最大宽度,则将其强制调整为指定大小,从而保持页面布局稳定。
<script LANGUAGE=“JAVASCRIPT”>
//检查图片大小是否大于预期大小, 大于则显示为预期大小
function show(chkw) { //chk images width
if(chkw>500) {
chkw=500;
}
else {
chkw=chkw;
}
return chkw;
}//shawl.qiu script
//example <img src=“images/teach/opera/01.jpg” onload=“this.width=show(this.width)” >
</script>
1.鼠标经过自动选取的复选框:
<input TYPE=“checkbox” onMouseMove=“checked=true”>
<input TYPE=“checkbox” onMouseMove=“checked=true”>
2.ACCESS 列出某一天所属星期的天数
//这个算法可费了我个把小时
查询一个日期所隶属星期所有天数的数据
SELECT *
FROM ctdate_by_query_date
WHERE dateandtime between ((#2006-5-15#+Weekday(2006-5-15))-6) and #2006-5-15#+Weekday(2006-5-15)
3. 双击滑鼠拷贝文本, 现在双击一下就清楚
<script LANGUAGE=“JAVASCRIPT”>
function ClipBoard(tdObj) { //IE Only
var holdtext = document.all[‘holdtext'];
holdtext.innerText = tdObj.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand(“Copy”);
alert(“text copied”);
}
</script>
<form NAME=“form1” METHOD=“post” ACTION=“”>
<ttextarea id=“holdtext” style=“display:none” ROWS=“10”></ttextarea>
</form>