几行ie下不兼容的代码,求大哥大姐指点...

<div id="article" class="article">
<img src="20111107043708281.jpg" style="width: 788px; height: 788px" /></p>
<img src="20111107043837222.jpg" style="width: 1024px; height: 768px" /></p>
</div><script type="text/javascript">
var article = document.getElementById("article");
var img = article.getElementsByTagName("img");
for (var i=0; i<img.length; i++) {
if (parseInt(img[i].style.width) > 638) {
img[i].setAttribute("style","");
img[i].setAttribute("width","638");
}
}
</script>
img中的style是编辑器生成的
我想在图片宽度大于638px时替换掉style中的属性
直接用html的width让图片做到成比例缩小
opera/ff/chrome/safari都测试通过
可是万恶的ie...

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head></head>
<body><div id="article" class="article">
    <p><img src="20111107043708281.jpg" style="width: 788px; height: 788px" /></p>
    <p><img src="20111107043837222.jpg" style="width: 1024px; height: 768px" /></p>
</div><script type="text/javascript">
//alert(navigator.appName);
var article = document.getElementById("article");
var img = article.getElementsByTagName("img");
for (var i=0; i<img.length; i++) {
    if (parseInt(img[i].style.width) > 638/*你这里不自己解决了么*/) {
img[i].style.width=638;
    }
}
</script>
</body>
</html>
img[i].setAttribute("style","");
img[i].setAttribute("width","638");img[i].style = {};
img[i].style.width = 638;
楼上两位大哥都没有明白我要做什么
如果我直接使用obj.style.width肯定是没有问题的
那我这个贴子发的也没意思
<img src="src" style="width:x" />
<img src="src" width="x" />
当x小于图片默认宽的时,上面两行代码是等价的吗?
大部分css肯定更方便,但是这里呢?
<img src="src" style="width:x" />
<img src="src" width="x" />
效果等同
不过同时写的时候<img src="src" style="width:x" width="x"/>
取样式表的宽度，样式表优先。
元素一些属性比如width,height,ie下在元素创建时就固定了，为只读属性。
你测试过还是想象他们效果一样?
不用告诉我样式的优先级
如果我不知道行间样式的优先也就不会写img[i].setAttribute("style","");
后来也查到ie8一下不支持使用setAttribute修改style/onclick
但还是想找到一个完美的解决方案
毕竟图片不按比例缩小会很难看
虽然除了ie6/7都可以
但是ie用户还是太多了
而且如果开了兼容视图的ie8/9
也会兼容到ie7的bug...
鄙视IE，，有没有谁能解决这个bug
可以试着在不兼容时候把img remove掉然后创建一个新的img 还是之前的src 宽高用计算之后的
只是个思路LZ可以试试
十分感谢11楼提醒function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}function picRatioZoom(element_id) {
var article = document.getElementById(element_id);
var img = article.getElementsByTagName("img");
for (var i=0; i<img.length; i++) {
if (parseInt(img[i].style.width) > 620) {
img[i].style.display = "none";
new_img = document.createElement("img");
new_img_rul = img[i].getAttribute("src");
new_img.setAttribute("src",new_img_rul);
new_img.setAttribute("width",620);
new_img_height = Math.ceil(620 / img[i].width * img[i].height);
new_img.setAttribute("height",new_img_height);
insertAfter(new_img,img[i]);
}
}
}function control(){
picRatioZoom("article")
}
addLoadEvent(control);
本来是想写一个简单的函数
结果变成一堆...有个问题ifandui能否解答一下
这是最早我按你给的思路写的
但是使用insertBefore刷新页面
开始无限循环插入第一张图片
怎么都没想明白var article = document.getElementById("article");
var img = article.getElementsByTagName("img");
for (var i=0; i<img.length; i++) {
if (parseInt(img[i].style.width) > 620) {
img[i].style.display = "none";
new_img = document.createElement("img");
new_img_rul = img[i].getAttribute("src");
new_img.setAttribute("src",new_img_rul);
new_img.setAttribute("width",620);
insertBefore(new_img,img[i]);
}
}
我是真想不明白你怎么测试的
如果图片原始大小为100*100
<img src="src" style="width:50px" />这会样得到一个50*100的图片
<img src="src" width="50" />这样则会得到一个50*50按比例缩小的图片