JavaScript input range

Question

JavaScript input range
上記で質問した者です
PC Firefoxで無事background-imageを取得できました

Android Chromeで実行したところnoneが表示されbackground-imageが取得できないことがわかりました
コードは下記になります
なぜnoneになるのでしょうか？
わかる方回答お願いいたします

<style>
input[type=range]{
    -webkit-appearance: none;
}
/* Chrome */
input[type=range]::-webkit-slider-runnable-track{
    height: 5px;
    background: gray;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    background: url("https://pngimg.com/uploads/free/free_PNG90756.png") no-repeat 0 0;
}
</style>

<script>
window.onload=function(){
range = document.createElement("input");
range.type="range";
range.min="0";
range.max="100";
range.style.width="100px";
range.style.height="50px";
document.body.appendChild(range);
Array.from(document.querySelectorAll("input[type=range]"), r => {
var property = window.getComputedStyle(r, '::-webkit-slider-thumb').getPropertyValue('background-image');
alert(property);
});
}
</script>

Comments

[m.ts10806]

タイトルが全く同じです。
要件を記載してください。（指摘したいのは「タイトル同じなら要件は同じ。解決してないのでは？」と言う点）
質問は編集できます。
https://teratail.com/help/question-tips#questionTips3-1

Answer 1

var property = window.getComputedStyle(r, '::webkit-slider-runnable-track').getPropertyValue('background-image');

意図は '::webkit-slider-runnable-track' ではなく '-webkit-slider-thumb' だと思いますが、いずれにしても Google Chrome では before after marker backdrop first-letter 以外の非標準の疑似要素のスタイルは取得できません。

Comments

[退会済みユーザー]

そうだったんですが、、できないことなんてあるんですね・・・
他の思い付く方法はありませんか？

[int32_t]

そもそも、どうして getComputedStyle() したいのでしょうか? どういうプロパティが与えられているかはページ製作者が把握しているはずですよね。

[退会済みユーザー]

input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
width: 48px;
height: 48px;
margin-top: -24px;
background: url("https://pngimg.com/uploads/free/free_PNG90756.png") no-repeat 0 0;
}

動的に画像を入れ替えたいのです。
URLは取得する必要は確かにありませんでしたが。。。

[int32_t]

確かに、::-webkit-slider-thumb の class 属性も style 属性も変更できないので、画像の入れ替えをするにはちょっと工夫が必要ですね。

「background-imageが取得できない」という問題に関してはこの回答で十分だと思いますので、とりあえずこの質問は解決済みにして別の質問を立てるのはいかがでしょうか。