iQueryでhtml要素の属性の取得設定でattr()が機能しない

Question

iQueryでタブの属性を取得・設定する時 attr()を使ってできると思っていました。

しかし、残念ながらいい結果が得られませんでした。
attr()のかわりに css()を使って何とか期待の結果を得ることができました。
以下はその実験をしたときのコードです!

変数ｘには値がセットされますが、変数ｙは undefined のままです。

この場合、なぜattr()はうまく機能しないのでしょうか。その理由を教えて頂きたいです。

Comments

[int32_t]

jQueryのcss()とattr()のマニュアルを読んでみましたか?

[ys-tombi2]

ごめんなさい　iQueryなんて存在しないですね。当然 jQueryです

Answer 1

colorという属性が設定されていないからでは？
もちろん変な属性はつけない方がいいです
それをやるのがcssメソッドでしょう

<script>
$(function(){
  console.log([
    $('#test1').attr('color'),
    $('#test2').attr('color'),
    $('#test3').attr('color'),
    $('#test4').attr('color'),
    ]);
  console.log([
    $('#test1').css('color'),
    $('#test2').css('color'),
    $('#test3').css('color'),
    $('#test4').css('color'),
    ]);
});
window.addEventListener('DOMContentLoaded', ()=>{
  console.log([
    test1.getAttribute('color'),
    test2.getAttribute('color'),
    test3.getAttribute('color'),
    test4.getAttribute('color'),
    ]);
  console.log([
    getComputedStyle(test1).color,
    getComputedStyle(test2).color,
    getComputedStyle(test3).color,
    getComputedStyle(test4).color,
    ]);
});
</script>
<style>
#test3{color:lime;}
#test4{color:lime !important;}
</style>
<font id="test1" color="red">1</font> <!-- color属性を反映して赤くなる -->
<font id="test2" color="red" style="color:blue">2</font>  <!-- style属性のcolorを反映して青くなる -->
<font id="test3" color="red" style="color:blue">3</font>  <!-- スタイルシートよりstyle属性が勝つので青-->
<font id="test4" color="red" style="color:blue">4</font>   <!-- スタイルシートを優先して緑になる -->

jQueryと生jsとの比較です

Comments

[ys-tombi2]

stylesheet に .menu-item {color: red;}と記入してあります。そして表示もそのようにできています。これがattr()メソッドからみて属性ではないのでしょうか。そこが理解できないのです。

[yambejp]

attr＝属性とはHTML要素に具体的に属性として書かれているものです
スタイルシートから参照した値ではありません
追記確認ください

[ys-tombi2]

<div id="hoge" color="red" style="color:yellow">test</div>
この記述で, color=... とstyle=... がどのように働くのか、またどのように整合するのか理解できません。
説明のあるサイトを教えて頂けないでしょうか。

[yambejp]

例示のcolor="red"は非常に古い書き方です
<font color="red">red</font>
なら文字を赤くしますが、今はやっては行けないことになっています

https://developer.mozilla.org/ja/docs/Web/HTML/Element/font

そのHTMLに適用されているスタイルシートを参照したいなら
getComputedStyle()を利用して調べるということです

Answer 2

その属性が書かれていなかったのでは。

これは古い属性です。代わりに CSS の color プロパティを使用して下さい。
HTML 属性リファレンス - HTML: HyperText Markup Language | MDN

Comments

[ys-tombi2]

ご指摘のページを見ると、たしかに「これは古い属性です。代わりに CSS の color プロパティを使用して下さい。」と書いてあります。しかし、その「古い属性です」という部分が分かりません。
古い属性と、そうでない属性の違いを説明したサイトを教えて頂けませんでしょうか。
またjQueryのcssメソッドとattrメソッドの違いを説明したサイトを教えて頂けませんでしょうか。

[Lhankor_Mhy]

こちらでよろしいですか？

> The .css() method is a convenient way to get a computed style property from the first matched element
https://api.jquery.com/css/#css-propertyName

> 要素は次のように属性(Attribute)を持つこともできます
https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#attributes

[Lhankor_Mhy]

つまり、おそらく ys-tombi2 さんはCSSのプロパティとHTML属性（アトリビュート）を混同されているのだと思います。

[ys-tombi2]

　なるほど、「CSSプロパティーとHTML属性の混同」というご指摘をヒントに調べてみました。結果は、両者を区別せずに混同していたことが確認できました。
　おかげさまで、独習中のjQueryの勉強を投げ出さずに、前に進むことができそうです。ありがとうございました。

[yambejp]

HTMLの属性は原則勝手につけてはいけません。
どうしても必要な場合はカスタムデータ(data-*)属性をつかってください