更改屬性類型

Question

是否可以更改元素的屬性type？把我的頭腦討論一下 - 我能找到的就是如何更改屬性的value。

我想在上面的元素上更改href到src。我有一個腳本，將元素類型更改爲移動設備的iframe，並且我需要該屬性爲src類型才能工作。

<a class="colorbox cboxElement" href="http://example.com">Diablo</a> 

這可能嗎？

Answer 1

使用removeAttr()方法來刪除屬性和attr()方法來設置的屬性。

$('.colorbox').attr('src', function() { 
 
    return $(this).attr('href'); 
 
}).removeAttr('href');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="colorbox cboxElement" href="http://example.com">Diablo</a>

---

使用純JavaScript使用Element#setAttribute方法設置屬性，你可以得到使用Element#getAttribute方法屬性值，並使用Element#removeAttribute方法刪除屬性。

var ele = document.querySelector('.colorbox'); 
 
ele.setAttribute('src', ele.getAttribute('href')); 
 
ele.removeAttribute('href');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="colorbox cboxElement" href="http://example.com">Diablo</a>

FYI： jQuery的方法將多個元素的工作，在Javascript中你需要遍歷元素集合更新多個。

對於如：

// for older browser use [].slice.call(....).forEach 
Array.from(document.querySelectorAll('.colorbox')).forEach(function(ele){ 
// do the rest here 
}) 

Answer 2

是的，您可以更改任何屬性。

用途：

element.setAttribute(attribute_name, attribute_value) 

，並獲得屬性的值使用

element.getAttribute(attribute_name) 

請注意，並非所有的屬性都將有元素的影響。 例如，設置類型屬性輸入元素將創建給定類型的輸入，但將其設置爲範圍什麼都不做。

如果你想持有屬性的一些數據信息，我會建議使用dataset API

Answer 3

如果你想使用的JavaScript只是，你可以得到使用getAttribute屬性，設置使用setAttribute新的屬性，並使用removeAttribute刪除舊的屬性。

var tag = document.getElementsByClassName('cboxElement')[0]; 
 
tag.setAttribute('src', tag.getAttribute('href')); 
 
tag.removeAttribute('href');

<a class="colorbox cboxElement" href="http://example.com">Diablo</a>