属性タイプを変更する

Question

要素の属性typeを変更することはできますか？これについて私の頭を悩ます - 私が見つけることができるのは、属性のvalueを変更する方法です。

上記の要素のhrefからsrcに変更します。私は携帯電話のiframeに要素の種類を変更するスクリプトを持っており、それが動作するにはsrc型に属性が必要です。

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

これは可能ですか？

Answer 1

使用して、属性を設定する属性とattr()方法を削除するremoveAttr()メソッドを使用することをお勧めします。

$('.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#getAttributeメソッドを使用して属性値を取得し、Element#removeAttribute方法を使用して属性を削除することができます属性を設定するElement#setAttributeメソッドを使用します。

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であなたは複数を更新する要素のコレクションを反復処理する必要があります。あなただけのJavaScriptを使用したい場合は、あなたがgetAttributeを使用して属性を得ることができ

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

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