javascriptで変更後のcssの属性値を取得したい

Question

前提・実現したいこと

cssの属性値をjavascriptで変更した後、
javascriptで変更後のcssの属性値を取得したいが、
cssで初めに設定した属性値しか取得することができず困っている。

発生している問題・エラーメッセージ

同上。

該当のソースコード

使用言語：html,css,javascript

例)
html

<div class="example" id="example"></div>

stylesheet.css
.example {
color: black;
}

---

$('.example').css('color', 'white');
var newcolor = $('.example').css('color');

→これで取得できる値がblackになってしまう。
実際はホームページの制作なので、あくまで一部を切り取り、シンプルに変更したものです。

試したこと

参考url。
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/CSSStyleDeclaration/getPropertyValue/#IDL-CSSOMString

var element = document.getElementById( "example" ) ;

var cssStyleDeclaration = getComputedStyle( element, null ) ;

var a = cssStyleDeclaration.getPropertyValue( "color" ) ; 

のような形で記述しましたが、動作せず。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[kei344]

（質問文は編集できます）質問タグやタイトルの「Java」は別言語なので、「JavaScript」に変更お願いします。

[takemou]

失礼いたしました。変更いたしました。

[kei344]

修正／編集ありがとうございます。
「参考url」をどのように確認されたのでしょうか。試したコードをコードブロックで質問文に追記していただけませんか？ コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[takemou]

いえ、こちらの不手際でしたので、ご指摘ありがとうございます。
また、追記いたしました。

[m.ts10806]

>var element = document.getElementById( ".example" ) ;
これだと　id=".example"になりますが（.も入ってる）、間違いないですか？

[takemou]

idは設定しております。
少し記述を変更しました。

[m.ts10806]

なるほど。でもHTMLは
id=".example"
にはなってませんね。
id="example"
です。
document.getElementById( ".example" ) ;　で取得できるのは
id=".example"
です（[ . ]が入っている）

[m.ts10806]

あぁ、そこも修正されたのですね。
履歴見ないと分からない・・・

Answer 1

変わってるように見えます。

.example{
	color:green;
}

<div class="example" id="example"></div> 

console.log($(".example").css("color"));
$(".example").css("color","yellow");
console.log($(".example").css("color"));
$(".example").css("color","black");
console.log($(".example").css("color"));

//出力結果
rgb(0, 128, 0)
rgb(255, 255, 0)
rgb(0, 0, 0)

Answer 2

document.getElementById( ".example" )のgetElementByIdはidで要素を取得するメソッドなのでクラスの取得はできません。

$( '.example' ).css( 'color', 'blue' );
var cssStyleDeclaration = getComputedStyle( $('.example').get(0) );

var value = cssStyleDeclaration.getPropertyValue( "color" ) ;
console.log( value );
$('.example').append( value );
```**動くサンプル：**[https://jsfiddle.net/sxj3o7mu/](https://jsfiddle.net/sxj3o7mu/)

---

【Document.getElementById() - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById)

【.get() | jQuery 1.9 日本語リファレンス | js STUDIO】
[http://js.studio-kingdom.com/jquery/core/get](http://js.studio-kingdom.com/jquery/core/get)

Comments

[kei344]

あ、質問文が修正されてた。

[takemou]

回答ありがとうございます。
大変参考になりました。

ただ、これでも取得できる値が初期のものでした。
もしかすると、
$('.example').click(function(){
ここで色を変更
});
XXXX
とした場合、XXXX部分に回答いただいたコードを記述しても、function内の変更した値は取得できないということでしょうか？

[kei344]

> 取得できないということでしょうか？
そうです。
クリックしたときに確認するような書き方にして試してください。

また、問題を再現できるだけのコードを先に提示されたほうが、こういう手戻りが無いですよ。

[takemou]

ありがとうございます。
解決いたしました。
以後気を付けます。