更改javascript中的属性值_Javascript_Jquery_Html_Attributes

更改javascript中的属性值

javascript jquery html

更改javascript中的属性值,javascript,jquery,html,attributes,Javascript,Jquery,Html,Attributes,我正在尝试更改img标记的属性，但它不起作用，我不知道为什么。我的代码正在更改大img源和缩放源，但代码只更改源，而不更改缩放，以下是我的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script

我正在尝试更改img标记的属性，但它不起作用，我不知道为什么。我的代码正在更改大img源和缩放源，但代码只更改源，而不更改缩放，以下是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    <script src='jquery-1.8.3.min.js'></script>
    <script src='jquery.elevatezoom.js'></script>
    <!--script src='jquery-1.8.3.min.js'></script-->
    <script>
    function colorImage(x){
    var newsrc = x.src.replace("thumb", "large");
    var d = document.getElementById("zoom_06_l"); 
    d.src = newsrc;
    d.setAttribute("data-zoom-image", newsrc);
}
    </script>

</head>

<style>
a{
    color:black;
    text-decoration:none;
}

.element{
width:150px;
}

.element .code {
text-align:center;
padding:10px;
}
</style>

<body>
<div style="width:960px;margin:0 auto;">
                <img id="zoom_06_l" src="large/001.jpg" width="960" data-zoom-image="large/001.jpg"/>


                <div id="gallery">
                    <a href="#" data-image="large/001.jpg" data-zoom-image="large/001.jpg"> 
                        <div class="element" style="float:left;margin-right:5px;">
                            <img id="zoom_06" src="thumb/001.png" /><br> 
                            <div class="code">דגם מספר : 0025</div>
                        </div>
                    </a>
                    <a href="#" data-image="large/30001.png" data-zoom-image="large/30001.png"> 
                        <div class="element" style="float:left;margin-right:5px;">
                            <img onclick="javascript:colorImage(this)" id="zoom_06" src="thumb/30001.png" /><br> 
                            <div class="code">דגם מספר : 30001</div>
                        </div>          
                    </a>

                </div>


</div>




<script>
    $("#zoom_06_l").elevateZoom({
    zoomType    : "lens",
    lensShape : "round",
    lensSize : 250 
    }); 
</script>


</body>
</html>


函数彩色图像（x）{
var newsrc=x.src.replace（“拇指”、“大”）；
var d=document.getElementById（“zoom_06_l”）；
d、 src=newsrc；
d、 setAttribute（“数据缩放图像”，newsrc）；
}
a{
颜色：黑色；
文字装饰：无；
}
.元素{
宽度：150px；
}
.element.code{
文本对齐：居中；
填充：10px；
}
$（“#zoom_06_l”）.升降空间({
zoomType:“镜头”，
透镜形状：“圆形”，
lensSize:250
});

id为zoom_06_l的img上的数据缩放图像没有改变，我不知道为什么。有什么帮助吗？

代替

d.setAttribute("data-zoom-image", newsrc);

试试这个

d.dataset.zoomImage = newsrc;

详情请参阅

“

您好，谢谢您的回答，纯javascriptWell您的代码也没有问题，我只是想尝试另一个选项。你能分享一个plunker给我看吗？你为什么说“plunker”？plunker是一个在线编辑。这更容易检查。嗯，我已经试着运行你的html与我，它似乎工作得很好。src和data zoom图像属性都在更新。但是在缩放中可以看到门的颜色。它是白色的，而不是棕色的。我的意思是缩放可以工作。但是尝试不同的图像…对于所有图像，将只显示一个缩放图像