1.變更屬性值
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width","180"); //變更屬性值
});
});
</script>
<img src="/i/eg_smile.gif" />
<br />
<button>設置圖像的 width 屬性</button>
2.取得屬性值
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert("Image width " + $("img").attr("width"));
});
});
</script>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />
<button>返回圖像的寬度</button>
3.變更多個屬性值
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("img").attr({width:"50",height:"80"});
});
});
</script>
<img src="/i/eg_smile.gif" />
<br />
<button>設置圖像的 width 和 height 屬性</button>
4.使用函數，先取得原寬度，計算後再返回
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width",function(n,v){
return v-50;
});
});
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />
<button>減少圖像的寬度 50 像素</button>
留言列表
其它分類 (8)
