Forum：未読リンクならクリックしたい

ボタン	Apply Compute Remove
リンク
リンクの背景色
リンクの色
リンクの色が白

[Apply] / [Remove] を押すと、リンクの背景色・リンクの色、が変わります。

[Compute] を押すと、リンクの背景色・リンクの色・リンクの色が白、の値を現在の値に更新します。

背景色は wa_20201029_link クラスを追加／削除して変更しています。
リンクの色は JavaScript で CSS の値を直接変更しています。
未読のリンクの背景色は赤（rgb(255, 0, 0)）です。
既読のリンクの背景色は青（rgb(0, 0, 255)）です。

このスクリプトだとクラスを追加して変更した背景色は既読の時にときに正しい値にならない（未読時の値を表示する）ため、リンクの色の変更方法のように JavaScript で直接変更する必要があります。
(リンクの色をクラスの追加／削除で変更した時も同様の結果でした)
(IE だと正常に動作してるかも)

IE でも動作すると紹介されている方法で記述したつもりですが、いま手元に Windows がないので動作確認していません。年内には動作確認予定です。

IE で動作するのであれば（IE でリンクの色の値を取得できるのであれば）、理論上（アルゴリズムさえ組めれば）画像マッチングを使わずにシナリオを作成することができます。

動作確認環境
macOS	10.14.6
Safari	13.0.4 (14608.4.9.1.4)
Google Chrome	86.0.4240.198 (Official Build) (x86_64)
Opera	72.0.3815.320

関連リンク

MDN：Element.currentStyle（For IE）

MDN：論理演算子［Logical operators］（論理 OR）

MDN：Window.getComputedStyle()

MDN：Element.classList

MDN：ElementCSSInlineStyle.style

MDN：Polyfill（機能をサポートしていないブラウザ用の代替コード）/td>

WinActor User Forum：未読リンクならクリックしたい

https://bit.ly/window-getcomputedstyle

[コードは右クリックで全選択できます]

winactor.css

@charset "UTF-8";

/* 未読リンクの色 */
a#wa_20201101.wa_20201029_link {
	background: red !important;
}
/* 既読リンクの色 */
a#wa_20201101.wa_20201029_link:visited {
	background: blue !important;
}

<script>
window.addEventListener('DOMContentLoaded', function() {
		const E20201101  = document.querySelector('#wa_20201101');
		const E20201101B = document.querySelector('#wa_20201101_background');
		const E20201101C = document.querySelector('#wa_20201101_color');
		const E20201101I = document.querySelector('#wa_20201101_if');
		let compStyles   = E20201101.currentStyle || window.getComputedStyle(E20201101);
		E20201101B.textContent = compStyles.getPropertyValue('background-color');
		let color = compStyles.getPropertyValue('color');
		E20201101C.textContent = color;
		E20201101I.textContent = 'False';
	document.querySelector('#wa_20201101_add').addEventListener('click', function() {
		E20201101.classList.add('wa_20201029_link');
		E20201101.style.color = 'white';
	});
	document.querySelector('#wa_20201101_compute').addEventListener('click', function() {
		E20201101B.textContent = compStyles.getPropertyValue('background-color');
		let color = compStyles.getPropertyValue('color');
		E20201101C.textContent = color;
		if (color === 'rgb(255, 255, 255)') {
			E20201101I.textContent = 'True';
		} else {
			E20201101I.textContent = 'False';
		}
	});
	document.querySelector('#wa_20201101_remove').addEventListener('click', function() {
		E20201101.classList.remove('wa_20201029_link');
		E20201101.style.color = '#222';
	});
});
</script>

<a id="wa_20201101" href="https://example.com/" target="_blank" rel="noopener noreferrer">リンク</a>

Leave a Reply Cancel reply