HTML 属性一覧

text属性

<div id="myDiv">操作対象</div>
<script>
　　$(function(){
　　　　var divNm = $("#myDiv").text();
　　　　// ⇒ divNm : "操作対象"
　　　　
　　　　$("#myDiv").text("新しい文字");
　　});
</script>

html属性
操作対象
<span id="mySpan">操作対象</span>
<script>
　　$(function(){
　　　　var htmlNm = $("#mySpan").html();
　　　　// ⇒ htmlNm : "操作対象"
　　　　
　　　　$("#mySpan").html("新しい文字");
　　});
</script>

○○○
<label id="myLabel_label">○○○</label&gt

<div id="myDiv_label">○○○</div>

○○○
<span id="mySpan_label">○○○</span>

○○○

<article id="myArticle_label">○○○</article>

「CSS opacity属性」参照

<input type="text" id="objText1" value="aaa" />
<script type="text/javascript">
　　var myText = document.getElementById("objText1");
　　myText.value = 'AAA';
　　
　　var contents = myText.value;
　　⇒ contents : AAA
</script>

<input type="text" id="objText1" value="aaa" />

<script type="text/javascript">
　　$(function(){
　　　　//value属性設定
　　　　$('#objText1').val('AAA');
　　　　
　　　　//value属性値の取得
　　　　var contents= $('objText1').val();
　　　　⇒ contents : AAA
　　});
</script>

baseball
basketball
soccer
<input type="checkbox" name="sports" id="chkbaseball" value="baseball" checked="checked" />
baseball<br/>
<input type="checkbox" name="sports" id="chkbasketball" value="basketball" checked="checked" />
basketball<br/>
<input type="checkbox" name="sports" id="chksoccer" value="soccer" />
soccer<br/>

val
text
<script type="text/javascript">
　　//Loopさせる
　　$(':checkbox[name="sports"]:checked').each(function(index, checkbox) {
　　　　var sportsValue = $(checkbox).val();
　　　　//⇒ sportsValue : baseball
　　　　//⇒ sportsValue : basketball
　　　　
　　　　var sportsText = $(checkbox).text();
　　　　//⇒ sportsText : baseball
　　　　//⇒ sportsText : basketball
　　});
</script>

prop
var isChecked = $("#chkbaseball").prop('checked');
//⇒ isChecked : true
var isChecked = $("#chksoccer").prop('checked');
//⇒ isChecked : false

checked

MAN
WOMAN
<input type="radio" id="rdoMan1" name="gender1" value="man" checked="checked" />
<label for="rdoMan1">MAN<label><br/>
<input type="radio" id="rdoWoman1" name="gender1" value="woman" />
<label for="rdoWoman1">WOMAN</label><br/>

<script type="text/javascript">
　　$(function(){
　　　　var isChecked = $("#rdoMan1").prop('checked');
　　　　//⇒ isChecked : true

　　　　var isChecked = $("#rdoWoman1").prop('checked');
　　　　//⇒ isChecked : false
　　});
</script>

value

MAN
WOMAN
<input type="radio" id="rdoMan2" name="gender2" value="man" checked="checked" />
<label for="rdoMan2">MAN</label><br/>
<input type="radio" id="rdoWoman2" name="gender2" value="woman" />
<label for="rdoWoman2">WOMAN</label><br/>

<script type="text/javascript">
　　$(function(){
　　　　var value = $("#rdoMan2").val();
　　　　//⇒ value : man
　　　　
　　　　var strGender = $("#rdoWoman2").val();
　　　　//⇒ value : woman
　　　　
　　　　//選択されているradioの文字を取得
　　　　var value = $(":radio[name='gender2']:checked").val();
　　　　//⇒ value : man
　　});
</script>

text
MAN
WOMAN
<input type="radio" id="rdoMan3" name="gender3" value="rdoMan3" checked="checked" />
<label for="rdoMan3">MAN</label><br/>
<input type="radio" id="rdoWoman3" name="gender3" value="rdoWoman3" />
<label for="rdoWoman3">WOMAN</label><br/>

<script type="text/javascript">
　　$(function(){
　　　　var value = $("#rdoMan3").val();
　　　　//⇒ value : rdoMan3
　　　　
　　　　//forはradioのidを指定。radioにおいてはvalueとidを一致させておく前提
　　　　var text = $('label[for=' + value + ']').text();
　　　　//⇒ text : MEN
　　});
</script>

prop

MAN
WOMAN
<input type="radio" id="rdoMan4" name="gender4" checked="checked" />
<label for="rdoMan4">MAN</label><br/>
<input type="radio" id="rdoWoman4" name="gender4" />
<label for="rdoWoman4">WOMAN</label><br/>

<script type="text/javascript">
　　$(function(){
　　　　$("#rdoWoman4").prop('checked' , true);
　　});
</script>

<input type="text" id="objText2" value="aaa" />

<script type="text/javascript">
　　var myText = document.getElementById("objText2");
　　myText.style.color = "red";
　　
　　var color = myText.style.color;
　　⇒ color : red
</script>

「-」を含む属性を扱う場合
<style>
　　(セレクタ) { background-color: black; }
</style>
↓
document.getElementById(～).style.backgroundColor = "black";
// 「-」を無くし、「-」の次の文字を大文字にする

<input type="text" id="objText2" value="aaa" />

<script type="text/javascript">
　　$(function(){
　　　　//style属性設定
　　　　$('#objText2').css('color', 'red');
　　　　
　　　　//style属性値の取得
　　　　var col = $('objText2').css('color');
　　　　⇒ col : rgb(255,0,0)
　　});
</script>

「CSS Style属性一覧」参照

属性の設定
var myImg = document.getElementById(“myImg”);
myImg.src = "b.jpg"

属性値の取得
var img_url = myImg.src;

属性の設定
$("img").attr("src","b.jpg");
$("img").attr("src":"b.jpg" , "alt":"b" , "width":"80")

属性値の取得
var img_url =$("img").attr("src");

propでも同様
$("img").prop("src","b.jpg");
var img_url =$("img").prop("src");