簡體   English   中英

在javascript中更改屬性值

[英]change attribute value in javascript

我正在嘗試更改img標簽處的屬性,但它不起作用,我不知道為什么。 我的代碼正在更改BIG img源和ZOOM源,但是代碼僅更改源而不是ZOOM,這是我的代碼:

<!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>

ID為zoom_06_l的img處的data-zoom-image沒有更改,我不知道為什么。 有什么幫助嗎?

代替

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

嘗試使用這個

d.dataset.zoomImage = newsrc;

詳情請參閱

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM